服务器端渲染+反应路由器重定向

Question

I have a higher order component (applied by wrapAuthComponent below) which wraps any components requiring authentication. This component checks if the user is logged in, and if not, redirects:

let next = this.props.location.pathname;
this.context.router.push({
    pathname: '/login',
    query: {...this.props.location.query, next}
});

Separately, I have a nav bar component which allows the user to login:

<IndexLinkContainer to={`/login? next=${this.props.pathname}`}>
    <NavItem className='nav-bar-button'> Login </NavItem>
</IndexLinkContainer>

(the pathname prop above is passed by the App container)

So, to recap, my routes are drawn like this:

<Route component={App} /* app contains the above navbar */ path="/">
    <Route component={LoginPage} path="/login" />
    <Route component={wrapAuthComponent(Foo)} path="/foo" />
</Route>

Now, onto the bug. When I go to /foo and am not logged in, I get the following error:

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)  href="/login?next=/login" data-reactid=
 (server)  href="/login?next=/foo" data-reactid="

What am I doing wrong here?

Answer 1

Depending on your version of Node.js and React, this GitHub issue may relate to your problem.

Taken from these React docs:

Some versions of Node.js have an Object.assign implementation that does not preserve key order. This can cause errors when validating the markup, creating a warning that says "React attempted to reuse markup in a container but the checksum was invalid". If you run into this issue, you can override Object.assign to use a polyfill that preserves key order.

Installing the object-assign package and setting the global Object.assign as follows may fix your problem:

Object.assign = require('object-assign');

If not, I think I'd need to see some more of your code before being able to determine the problem.