activeClassName на навигационной ссылке не работает - реагирует

Question

Пытаясь изменить стиль ссылки Nav в панели навигации при нажатии, я понял из поиска в Google, что мне следует использовать «activeClassName». Пробовал использовать его, и он не работает. Что я делаю не так?

Код меню:

    <Navbar bg="none" expand="md">
      <Navbar.Brand href="/">Bloom</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="ml-auto order-0">
          <Nav.Link activeClassName="active" href="/contact">main</Nav.Link>
          <Nav.Link activeClassName="active" href="/about">main</Nav.Link>
          <Nav.Link activeClassName="active" href="/guide">main</Nav.Link>
          <Nav.Link activeClassName="active" href="/brands">main</Nav.Link>
          <Nav.Link activeClassName="active" href="/" exact>
            main
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>

Стиль:

   .active{
 color:red;
}

Я стараюсь сделать свой код максимально простым, поэтому, если у вас есть лучший способ, хотелось бы услышать .

Answer 1

Похоже, вы путаете его с элементом NavLink маршрутизатора .

В вашем коде, похоже, используется элемент реагирования bootstrap Nav.Link.

Вы должны использовать activeKey prop на родительском элементе Nav, чтобы отметить активный элемент.

<Nav className="ml-auto order-0" activeKey="/contact">
  <Nav.Link href="/contact">main</Nav.Link>
  <Nav.Link href="/about">main</Nav.Link>
  <Nav.Link href="/guide">main</Nav.Link>
  <Nav.Link href="/brands">main</Nav.Link>
  <Nav.Link href="/" exact>
    main
  </Nav.Link>
</Nav>

Это автоматически добавит класс active к активной ссылке.