帶共享路由器上下文的多個ReactDOM.render調用

我得到了兩個像這樣呈現的React組件。帶共享路由器上下文的多個ReactDOM.render調用

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這樣的hacky方法工作，或者解析location.path來根據項目的相應路線更改側邊欄的佈局。

來源

2017-02-14 Matthias Van Parijs

爲什麼''分開呈現？它應該在你的''組件中。這會讓事情變得更直接。 –

我知道，但目前的項目結構不允許我使用單個根組件，並讓React處理整個站點。這確實會更容易，因爲''是當時路由器環境的一部分。隨着時間的推移，當更多的網站/應用程序被重新寫入React時，我們會接近一個通用的根元素。不幸的是，今天還不是這樣。 –

您應該可以在自己的<Router>中呈現自己的邊欄。重要的是他們共享相同的history實例（在這種情況下，browserHistory）。

當一個<Router>掛載時，它將一個監聽器添加到它的history實例。當一個history實例收到一個新的位置時，它會通知它的所有監聽器。

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

來源

2017-02-14 16:08:51

帶共享路由器上下文的多個ReactDOM.render調用

回答

相關問題