这基本上是我所有的代码。我正在运行 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 []
我有点迷茫,因为它应该可以工作..一切看起来都很好。