twitter-bootstrap - 如何使用 React-Router 处理 React-Bootstrap 的 Nav NavItem 中的 .active 状态

Question

我正在将 React 与 react-router 2.0.0-rc4、react-bootstrap 0.28.2 和 react-router-bootstrap 0.20 结合使用.1。我的导航栏主要使用以下结构，但 .active 类未正确应用:

  <Navbar>
    <Nav activeKey={ this.state.selectedKey } onSelect={ this._onSelect } >
      <LinkContainer to="/">
        <NavItem eventKey={1}>Home</NavItem>
      </LinkContainer>
      <LinkContainer to="/login">
        <NavItem eventKey={2}>Login</NavItem>
      </LinkContainer>
      ...
    </Nav>
  </Navbar>

问题是当我在菜单项之间移动时，.active 类没有取消设置。因此，如果我单击 NavItem 2，这两个项目都会变为事件状态(无论 this.state.selectedKey 设置为什么)。我有一个更大的菜单，当单击任何菜单项时，所有导航项都会设置为事件状态。我错过了什么？

我不认为这个 Q 与 this post 重复。因为 React-Bootstrap 组件应该通过 activeKey 属性自动管理事件状态，但是..文档没有显示这方面的清晰示例，所以，很困惑:(

Answer 1

如果你的路线看起来像

<Route path="/">
  <Route path="login" />
</Route>

然后你会想要使用<IndexLinkContainer>而不是<LinkContainer>对于to="/"链接。