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

Question

我正在使用 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'

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

Answer 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]
  );
});

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

Async Routes Causes Server-Side Checksum Invalid Error

reactjs

webpack

react-jsx

react-router

isomorphic-javascript