Question

我想根据路线拆分捆绑包。因此尝试在react-router中进行动态导入，如下所示，但是没有运气。也尝试过与可装载物相同，在可装载物中，水合物开始时会闪烁。它删除了整个dom，然后再次添加。如何实现这一目标？，我不想将所有内容捆绑在一个文件中，类似地，我有10条不同的路由。

// With dynamic import
const routes = [
{
 path: '/details/:name/:id',
 component: import(/* webpackChunkName: "details" */ '../components/details')
}
];

// With Loadable
const Details = loadable(() => import('../components/details'), { ssr: true });
const routes = [
  {
    path: '/details/:name/:id',
    component: Details
  }
];```

Answer 1

您可能会使用带有功能的component道具，而不是在Route中使用render道具，因此可以在内部实现一些逻辑

const routes = [
{
 path: '/details/:name/:id',
 render: () => condition ? import(/* webpackChunkName: "details" */ '../components/details') : import(/* webpackChunkName: "component2" */ '../components/component2')
}
];

React Router中的动态导入组件

1 个答案: