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

Answer 1

如果您的路线看起来像

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

然后，您需要使用<IndexLinkContainer>而不是<LinkContainer>来获取to="/"链接。

Answer 2

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

所以你最终得到了

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

如何使用React-Router

2 个答案: