Как установить активную ссылку в Navbar, используя Nav.Link и React Router?

Question

Я хочу добавить очень простой Navbar на свой сайт с использованием React Router, но стили или маршруты могут быть испорчены в зависимости от того, что я изменяю.

Здесь говорится об использовании Navbar, Nav и Nav.Link https://react -bootstrap.github.io / components / navs / # nav-link-props , поэтому я хочу использовать их.

Проблема в том, что мне кажется, чтоNav.Link необходим атрибут href для отправки пользователя по этому маршруту, например / One.Но тогда ссылка One вверху не получает активных стилей.Если я удаляю атрибут href, он получает активные стили при нажатии на эту ссылку, но не отправляет пользователя в / One или не загружает компонент, который я хочу для этого маршрута, очевидно.

Я несм. SO-ответ об этом, который использует эти теги, просто ответы с использованием Link и NavLink, которые URL-адрес, который я связал, не использует.На этой странице также нет примера, который бы использовал несколько атрибутов href.Что мне не хватает?Ниже приведен мой код.

class Header extends Component {
  render() {
    return (
      <Navbar bg="light" variant="light" fixed="top">
        <Navbar.Brand href="#">MySite</Navbar.Brand>
        <Nav>
          <Nav.Link href="/" activeClassName="active" eventKey="/">Home</Nav.Link>
          <Nav.Link href="/one" activeClassName="active" eventKey="/one">One</Nav.Link>
          <Nav.Link href="/two" activeClassName="active" eventKey="/two">Two</Nav.Link>
        </Nav>
      </Navbar>
    )
  }
}

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route path="/" exact strict component={Redcircle} />
          <Route path="/one" exact strict component={Bluesquare} />
          <Route path="/two" exact strict component={Greentriangle} />
        </div>
        </Router>
    );
  }
}

Ожидаемый результат: Navbar, который изменяет URL на / one, загружает компонент Bluesquare и делает слово One в Navbar активными стилями. Фактический результат: либо загружается маршрут, либо One активен.стили

Answer 1

Вы пропустили activeKey реквизит от Nav компонента.Просто передайте параметр от маршрутизатора HOC

UPD: activeClassName обеспечивает компонент react-router-dom, и, как вы можете видеть, Nav.Link имеет active проп, но между ними нет никаких отношений.

Самый простой способ решить вашу проблему - передать текущий путь в activeKey prop в Nav компоненте, и текущий путь, который вы можете получить из поля pathname вlocation опора, которая обеспечивает withRouter HOC .

UPD2: Вот детская площадка