如何使用 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 class 未正确应用：

  <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 class 没有取消设置。因此，如果我单击 NavItem 2，这两个项目都会变为活动状态（无论 this.state.selectedKey 设置为什么）。我有一个更大的菜单，当单击任何菜单项时，所有导航项都会设置为活动状态。我错过了什么？

我不认为这个 Q 是的重复，因为 React-Bootstrap 组件应该通过 activeKey 属性自动管理活动状态，但是..文档没有给出一个明确的例子，所以，很困惑:(

Answer 1

如果你的路线看起来像

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

然后你会想要使用 <IndexLinkContainer> 而不是 <LinkContainer> 作为 to="/" link.

Answer 2

有了 <LinkContainer>，就不需要 eventKey，所以可以将其删除。这样做可以正确处理 active。

所以你最终得到

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

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

How to handle .active state in React-Bootstrap's Nav NavItem, with React-Router

twitter-bootstrap

reactjs

react-bootstrap

react-router