Как решить проблему с NavLink (NavLink не переключает активный класс)?

Question

У меня проблема с компонентом NavLink.Он отлично работает, но не переключает активный класс или любой другой.

Я пытался использовать activeClassName или activeStyle, но он все еще не работает.Я пробовал решения, которые я нашел на github или stackoverflow, но ни одно из них не решило мою проблему.У меня есть реакция ^ 16.8.6, реакция dom ^ 16.8.6, реакция маршрутизатора ^ 5.0.1, реакция маршрутизатора dom ^ 5.0.1 и реакция скриптов 3.0.1

'' '

<header>
          <nav>
            <ul>
              <li>
                <NavLink activeClassName="active" to="/" exact >Start</NavLink>
              </li>
              <li>
                <NavLink activeClassName="active" to="/news" >News</NavLink>
              </li>
            </ul>
          </nav>
        </header>
  

.active {
  border-bottom-color: yellow;
}

Я ожидал, что NavLink переключит этот класс.

Answer 1

Вот пример, который реализует «выбранный» класс, когда ссылка активна, иначе «нормальный» класс реализован

import React from "react"
import {NavLink} from "react-router-dom"
import "./Components/style.css"


class Navbar extends React.Component{
    render(){
        return(
            <div>
                <ul>
                    <li><NavLink exact to = "/" activeClassName="selected" className="normal"><h3>Start</h3></NavLink></li>
                    <li><NavLink exact to = "/mid" activeClassName="selected" className="normal"><h3>Mid</h3></NavLink></li>
                    <li><NavLink exact to = "/end" activeClassName="selected" className="normal"><h3>End</h3></NavLink></li>



                </ul>   
            </div>
        )
    }
}

export default Navbar

И моя таблица стилей

.normal{
    border: 2px solid green;
}
.selected{
    border: 2px solid yellow;
}