サーバ側のレンダリング+反応ルータのリダイレクト

Question

私は、認証を必要とするコンポーネントを包む上位コンポーネント（以下、wrapAuthComponentが適用されます）を持っています。このコンポーネントチェックユーザがログインし、そうでない場合にされている場合、リダイレクト：

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

別に、Iは、ユーザがログインすることを可能にするナビゲーションバーの成分を有する：

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

上記（pathnameプロプ

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

01：

ので、復習に、私のルートは次のように描かれている）Appコンテナによって渡されます

今、バグに。私はここで間違って何をやっている

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=" 

：私は/fooに行き、ログインしていないのですときは、私は次のエラーを取得しますか？

Answer 1

Node.jsとReactのバージョンによっては、this GitHub issueが問題に関連する場合があります。

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.

から撮影

object-assignパッケージをインストールすると、次のようにグローバルObject.assignを設定するには、あなたの問題を解決することがあります。

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

ない場合、私はいくつかの詳細を参照する必要があると思います問題を特定する前にコードの