带共享路由器上下文的多个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调用

回答

相关问题