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

Reactjs 异步路由导致服务器端校验和无效错误,reactjs,webpack,react-router,react-jsx,isomorphic-javascript,Reactjs,Webpack,React Router,React Jsx,Isomorphic Javascript,我正在使用Webpack、react、react路由器、react-redux、redux和simple redux路由器 我在使用带有异步路由和服务器端渲染的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 rende

我正在使用Webpack、react、react路由器、react-redux、redux和simple redux路由器

我在使用带有异步路由和服务器端渲染的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
如果我将其更改为此,则不再出现该错误:

#路由
路径:“游戏”
getComponent:(位置,cb)=>
cb null,需要“./views/game”

在使用异步路由时,有没有更好的方法来处理此问题?

我得到的消息是
您试图使用服务器渲染将组件渲染到文档中,但校验和无效。这通常意味着您在客户端上呈现的组件类型或道具与服务器上呈现的组件类型或道具不同,或者您的render()方法不纯。

并通过在客户端上使用
match
进行修复,如下所述:

文件建议:

match({ history, routes }, (error, redirectLocation, renderProps) => {
  render(<Router {...renderProps} />, mountNode)
})
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]
  );
});