Async Routes Causes Server-Side Checksum Invalid Error

问题

I'm using Webpack, react, react-router, react-redux, redux, and simple-redux-router.

I got this error while using react-router with async routes and server-side rendering:

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

My routes.cjsx has this:

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

If I change it to this, I no longer get that error:

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

Is there a better way to deal with this issue when using async routes?

回答1:

I got this as 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.

And fixed it by using match on the client, as described here: https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md#async-routes

The doc suggests:

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

Specific non-JSX client-side code that works for me (will refactor a bit):

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

来源：https://stackoverflow.com/questions/35424500/async-routes-causes-server-side-checksum-invalid-error

标签

reactjs

Webpack

react-router

react-jsx

isomorphic-javascript