我得到一个像这样的数组
{Path:xxx,
Component:"./xxx/ComPXX"}
从我的 API 并基于它创建我的应用程序的路由。目前我正在使用 React-Loadable (5.5.0) 和 React-Router(4.4.0-betax 以避免在严格模式下出现警告)。查看工作示例 here .
自从 React 16.6 引入了 React.lazy,我正在尝试迁移我的解决方案,但是我遇到了错误和困难,但是我尝试这样做。您可以看到已迁移(失败)的代码 here .
知道为什么这不起作用吗?会不会是因为 React.Lazy 不接受变量?
最佳答案
你有 2 3 个主要问题:
在这一行中:
var c = <dynamicLoader component={prop.component} />;
User-Defined Components Must Be Capitalized .所以把它改成这样:
var c = <DynamicLoader component={prop.component} />;
显然您还需要更改声明:
function DynamicLoader(props) { return ( <Suspense fallback={<div>Loading...</div>}> React.lazy(() => import(`${props.component}`)) </Suspense> ); }
在这一行
return <Route exact path={prop.path} component={c} key={key} />;
正如 prop
component
的名称所暗示的那样,您需要传递一个 组件而不是元素你可以阅读更多关于差异的信息 在DOCS .所以你需要把它改成这样:
return <Route exact path={prop.path} component={() => c} key={key} />;
你是对的。我错过了 children 的部分,你正在渲染一个字符串。您可以创建一个 变量并将其呈现为子项:
function DynamicLoader(props) { const LazyComponent = React.lazy(() => import(`${props.component}`)); return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent/> </Suspense> ); }
关于javascript - 使用 React.Lazy 的动态延迟加载 (16.6.0),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52986700/