reactjs - webpack + 代码分割出现 "React attempted to reuse markup"错误

Question

我已经开始在“通用”应用程序(react-router、redux、webpack - 很大程度上基于 https://github.com/erikras/react-redux-universal-hot-example )中实现代码分割。

在实现代码分割的(唯一)路线上，在进行完整的浏览器刷新时，我收到以下 React 错误消息:

warning.js:44Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) <!-- react-empty: 1 -
 (server) <div class="root" dat

如果我禁用代码分割，错误消息就会消失。我猜测这是由于 React 在 Webpack 加载器加载 Javascript block 之前进行了第一次渲染，因此，它生成的标记与服务器上生成的标记不同。这是正确的吗？

• 我应该担心错误消息吗？
• 有什么方法可以弄清楚在这条消息发生的确切时间 React 渲染了什么？
• 有什么办法可以让该消息消失吗？ (除了不使用代码分割之外)

Answer 1

解决方案是在第一次渲染之前调用react router的match函数。

参见https://github.com/reactjs/react-router/issues/2036#issuecomment-225792937和https://github.com/reactjs/react-router/blob/v2.4.1/docs/guides/ServerRendering.md#async-routes