Блог

У меня есть панель навигации с тремя компонентами / ссылками. Структура выглядит следующим образом:

 <ul className="flex text-white flex-col lg:flex-row list-none lg:ml-auto">
    <NavLink
       activeClassName="active"
       to="/"
     >
        Home
     </NavLink>

     <NavLink
       activeClassName="active"
       to="/about"
      >
        <span className="ml-2">About</span>
      </NavLink>

     // etc
  

Я подключил его к браузерному маршрутизатору, который корректно изменяет страницы, которые передаются в <Route> ‘s, поэтому я считаю, что я все правильно настроил.

 <div className="App">
  <Navbar />
  <Route path="/about" component={About} />
  <Route exact path="/" component={Home} />
</div>
  

У меня есть класс ‘active’ в моем файле App.css, чтобы изменить цвет шрифта кнопки на красный. Это работает, но проблема для меня в том, что ссылка / home никогда не теряет свой активный класс. Пример изображения:

[! [введите описание изображения здесь] [1]] [1]

Я упускаю что-то очевидное здесь? [1]: https://i.stack.imgur.com/w3rHD.png

Я не знаю, использую ли я ту же версию, что и вы, но я всегда использовал isActive для NavLinks, чтобы определить, активны они или нет.

 <NavLink to="/" isActive={(match, location) => {
  return location.pathname === "/";
}} activeClassName="active">Home</NavLink>
  

Просто выполнил быстрый поиск и нашел это, что может быть полезно: https://reactrouter.com/web/api/NavLink

Вам также нужно установить exact для root <NavLink/> ,

  <NavLink exact to="/">Home</NavLink>
  

вот так ^

https://codesandbox.io/s/react-router-sidebar-forked-dd724?file=/example.js:1210-1279