异步路由导致服务器端校验和无效错误答案

【问题标题】：Async Routes Causes Server-Side Checksum Invalid Error异步路由导致服务器端校验和无效错误
【发布时间】：2016-05-27 06:09:18
【问题描述】：

我正在使用 Webpack、react、react-router、react-redux、redux 和 simple-redux-router。

我在使用带有异步路由和服务器端渲染的 react-router 时遇到了这个错误：

bundle.js:1 Warning: 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) <noscript data-reacti
(server) <div data-reactid=".1

我的 routes.cjsx 有这个：

# Routes
path: 'game'
getComponent: (location, cb) =>
    require.ensure [], (require) =>
        cb null, require './views/game'

如果我把它改成这个，我就不会再收到那个错误了：

# Routes
path: 'game'
getComponent: (location, cb) =>
    cb null, require './views/game'

在使用异步路由时有没有更好的方法来处理这个问题？

【问题讨论】：

标签： reactjs webpack react-router react-jsx isomorphic-javascript

【解决方案1】：

我收到的是You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure.

并通过在客户端上使用 match 来修复它，如下所述：https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md#async-routes

文档建议：

match({ history, routes }, (error, redirectLocation, renderProps) => {
  render(<Router {...renderProps} />, mountNode)
})

适用于我的特定非 JSX 客户端代码（将重构一点）：

var match = ReactRouter.match;
var Router = React.createFactory(ReactRouter.Router);
var Provider = React.createFactory(ReactRedux.Provider)
match({ history: appHistory, routes: routes }, function (error, redirectLocation, renderProps) {
  ReactDOM.render(
      Provider({store: store},
      Router(renderProps)),
        $(document)[0]
  );
});

【讨论】：