複数のReactDOM.render呼び出しで共有ルータコンテキスト

Question

このようにレンダリングされた2つのReactコンポーネントがあります。

ReactDOM.render(
    <Router history={ browserHistory }> 
    <Route path='/items' component={ App }> 
     <IndexRoute component={ Home } /> 
     <Route path='/items/:id' component={ Details } /> 
    </Route> 
    </Router>, 
    document.getElementById('app') 
); 

サイドバーです。

ReactDOM.render(
    <Sidebar />, 
    document.getElementById('sidebar') 
); 

私はサイドバーコンポーネントに反応し、ルータからリンクヘルパーを使用したいと思います。ただし、次のエラーが表示されます。「キャッチ不変の違反：ルータのコンテキスト外でレンダリングされたリンクはナビゲートできません。」これは、サイドバーが最初に見たようなルータコンテキスト内にないために意味があります。

ルータのコンテキストをサイドバーと共有する方法はありますか。

私はルートに基づいてサイドバーのレイアウトを変更し（正しくthis.props内のルータオブジェクトにアクセスします）、リンクを使用する必要があります。

history.pushStateのようなハッキーなアプローチや、location.pathを解析して、アイテムの対応するルートに従ってサイドバーのレイアウトを変更する必要はありません。

Answer 1

サイドバーを自分で<Router>にレンダリングするだけで済みます。重要なことは、同じhistoryインスタンス（この場合はbrowserHistory）を共有していることです。

<Router>がマウントされると、リスナーがそのhistoryインスタンスに追加されます。 historyインスタンスは新しい場所を受け取ると、すべてのリスナーに通知します。

ReactDOM.render((
    <Router history={browserHistory}> 
    <Route component={Sidebar} /> 
    </Router> 
) document.getElementById('sidebar')