Question

我有两个像这样呈现的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')
);

我想在侧栏组件中使用react-router中的 Link 帮助程序。但是，我收到以下错误：“Uncaught Invariant Violation：在路由器上下文之外呈现的链接无法导航。”这是有道理的，因为侧边栏不像上面第一次看到的那样在路由器环境中。

有没有办法与侧边栏共享路由器上下文？

我想根据路线更改侧边栏布局（并正确访问this.props中的路由器对象）并使用 Link 。

我不想绕着像history.pushState这样的hacky方法，或者根据相应的项目路径解析location.path来改变侧边栏的布局。

Answer 1

您应该只能在自己的<Router>中呈现侧边栏。重要的是，它们共享相同的history实例（在本例中为browserHistory）。

当<Router>安装时，它会向其history实例添加一个侦听器。当history实例收到新位置时，它会通知所有侦听器。

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

多个ReactDOM.render调用共享路由器上下文

1 个答案: