Loadable.Capture不报告任何模块

Question

这基本上都是我的代码.我正在运行Hapi并尝试使用react-loadable来服务器渲染我的React应用程序.

我在这里为代码添加了很多缺失的部分.

const location = req.url.pathname
const context = {}
const modules = []

const Router = () => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/login" component={Login} />
    <Route path="/me" component={Profile} />
    <Route component={NotFound} />
  </Switch>
)

const App = () => (
  <StaticRouter location={location} context={context}>
    <main>
      <Header />
      <Router />
      <Footer />
    </main>
  </StaticRouter>
)

const preloadables = [ Home, Login, Profile, NotFound ]
await Promise.all(preloadables.map(preloadable => preloadable.preload()))

const html = ReactDOMServer.renderToString(
  <Loadable.Capture report={moduleName => modules.push(moduleName)}>
    <App/>
  </Loadable.Capture>
)

// render html

它正确呈现页面,因为我在浏览器中看到了我的React应用程序.虽然我没有看到"路由器"的任何内容,除非我在服务器上禁用缓存.因此第一个请求不会呈现路由器,而以下请求不会.

在服务器上,始终console.log('modules:', modules)返回modules: [].无论缓存如何.因此,即使我禁用缓存,刷新页面两次以查看路由器工作,模块仍为空.

npm run start:server
Warning: setState(...): Can only update a mounting component. This usually means you called setState() outside componentWillMount() on the server. This is a no-op.

Please check the code for the LoadableComponent component.
modules []
modules []
modules []
modules []
modules []

我有点失落,因为它应该工作..一切看起来都没问题.

Answer 1

似乎即使您加载了这些组件，react-loadable 也不知道它们。

如果您使用Loadable.preloadAll而不是以编程方式加载组件，它应该可以解决您的问题。

当路由数量增加时，您当前的方法也会变得非常冗长，您将必须维护预加载列表。