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

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

1 个答案: