異步路由導致服務器端校驗和無效錯誤

Question

我正在使用Webpack，react，react-router，react-redux，redux和simple-redux-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] 
); 
});