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

Question

我使用的与之反应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是这篇文章的重复,因为React-Bootstrap组件应该通过activeKeyprop 自动管理活动状态,但是..文档没有显示这个的明确例子,所以,困惑:(

Answer 1

如果您的路线看起来像

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

然后,你需要使用<IndexLinkContainer>,而不是<LinkContainer>为to="/"链接.