反應路由器中的動態導入組件

Question

我想根據路由拆分捆綁包。 因此嘗試在 react-router 中進行動態導入，如下所示，但沒有運氣。 也嘗試了與 loadable 相同的方法，在 loadable 中，水合物啟動時會閃爍。 它刪除了整個 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

您可以使用帶有 function 的render prop，而不是在Route中使用component prop，因此允許您在內部實現一些邏輯

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