如何将组件延迟加载到 React router dom Route 组件？答案

【问题标题】：How to lazy load components to React router dom Route component?如何将组件延迟加载到 React router dom Route 组件？
【发布时间】：2020-08-30 22:11:52
【问题描述】：

我有这个：

<Router>
  <Route component={MyLazyLoadedComponent} />
</Router>

我想过做：

<Router>
  <Route render={props => {
    import('path/to/component').then(Module => {
      return <Module.default {...props.match.params} />
    })
  }} />
</Router/>

但这不起作用，因为来自 React 路由器 Dom 的 <Route /> 组件不是异步的（路由实际上是在导入之前呈现的）。如何实现这种代码拆分？

这个问题实际上也与 Webpack 以及 Parcel 捆绑器有关。

【问题讨论】：

您可以使用react lazy呈现动态导入。
我试过这个但得到：Error: Cannot find module 'About.04ba37b6.js,../routes/About.jsx,About.04ba37b6.js.map,../routes/About.jsx'
你是如何设置你的 react 项目的？你用过 CRA 吗？
不，我没有使用它只是手动创建的
如果您自己设置 Webpack，您可能想阅读 Webpack 的 guide 代码拆分。你的 Webpack 配置应该有点像 this

标签： javascript reactjs webpack parceljs

【解决方案1】：

我认为这应该可行：

const AsyncComponent = React.lazy(() => import('path/of/component'));

...

 <Route path={`path`} render={props => <AsyncComponent {...props} />} />

...

我希望这会有所帮助！

【讨论】：

试过了，但它实际上并没有拆分代码 - 仍然有一个包而不是新块。 Parcel bundler 可能无法从 react 中识别出这种惰性方法，因为他应该拆分和跟踪