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

【问题标题】：How to handle .active state in React-Bootstrap's Nav NavItem, with React-Router如何使用 React-Router 处理 React-Bootstrap Nav Nav 项中的 .active 状态
【发布时间】：2016-04-18 18:31:51
【问题描述】：

我将 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 属性自动管理活动状态，但是.. 文档没有显示一个明确的例子，所以，很困惑:(

【问题讨论】：

标签： twitter-bootstrap reactjs react-router react-bootstrap

【解决方案1】：

如果您的路线看起来像

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

那么您将希望使用<IndexLinkContainer> 而不是<LinkContainer> 作为to="/" 链接。

【讨论】：

【解决方案2】：

使用<LinkContainer>，就不需要eventKey，因此可以将其删除。这样做会正确处理active。

所以你最终得到了

  <Navbar>
    <Nav>
      <LinkContainer to="/">
        <NavItem>Home</NavItem>
      </LinkContainer>
      <LinkContainer to="/login">
        <NavItem>Login</NavItem>
      </LinkContainer>
      ...
    </Nav>
  </Navbar>

【讨论】：