Javascript 如何将lazyloaded组件分配给React Router中的Routes.js

我从某人那里继承了一个SSR应用程序，我在代码拆分方面遇到了问题

基本上，我手上拿着一个可反应加载的MyPage版本，我会遇到问题

[不确定我是否正确理解SSR的体系结构]

如果我使用React Loadable或Loadable组件。甚至只是写我自己的。。。routes.js文件将因

而失败，这通常发生在您忘记导出…

时。虽然很明显我没有这么做

routes.js

const routes = [
//  lots of routes
  {
    ...MyPage,
    path: '/test-ssr'
  },
//  lots of routes

• 所有棱镜数据返回良好

• 但内部路线：

这基本上是说：

{
  component: MyPage, (including the fetchData() func)
  path: '/test-ssr',
}

然后调用fetchData，如上^^

但问题是：如果你交给路由的MyPage实际上是

LazyMyPage

这样的页面，你该如何处理

const LazyMyPage = Loadable({
 loader: () => import(/* webpackChunkName: "MyPage" */'./pages/MyPage/MyPage'),
 loading: Loading
});

{
  component: LazyMyPage ????
  path: '/test-ssr',
}

  {
    ...MyPage,
    path: '/test-ssr'
  },

{
  component: MyPage, (including the fetchData() func)
  path: '/test-ssr',
}

const LazyMyPage = Loadable({
 loader: () => import(/* webpackChunkName: "MyPage" */'./pages/MyPage/MyPage'),
 loading: Loading
});

{
  component: LazyMyPage ????
  path: '/test-ssr',
}