Как обрабатывать состояние .active в Nav NavItem React-Bootstrap с помощью React-Router

Я использую 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). У меня больше меню, и все элементы навигации становятся активными при нажатии любого элемента меню. Что мне не хватает?

Я не думаю, что этот вопрос является дубликатом этот пост, потому что компоненты React-Bootstrap должны автоматически управлять активным состоянием через свойство activeKey, но... документы не показывают четкого примера этого, поэтому смущенный :(


reactjs react-router twitter-bootstrap react-bootstrap
person pete    schedule 13.01.2016    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Если ваши маршруты выглядят как

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

Тогда вы захотите использовать <IndexLinkContainer>, а не <LinkContainer> для ссылки to="/".

person taion    schedule 13.01.2016

arrow_upward
2
arrow_downward

С <LinkContainer> нет необходимости в eventKey, поэтому его можно удалить. Это приведет к правильной обработке active.

Таким образом, вы в конечном итоге с

  <Navbar>
    <Nav>
      <LinkContainer to="/">
        <NavItem>Home</NavItem>
      </LinkContainer>
      <LinkContainer to="/login">
        <NavItem>Login</NavItem>
      </LinkContainer>
      ...
    </Nav>
  </Navbar>
person pdeschen    schedule 26.10.2017