ActiveClassName в реактивном маршрутизаторе выделяет две ссылки NavLink одновременно

Я изучаю React Router и следую этот учебник Все ясно и работает, как указано (спасибо автору), за исключением проблемы, которая выделяет активную ссылку NavLink.

Взгляните на файл css и обратите внимание на класс .current:

nav ul {
  list-style: none;
  display: flex;
  background-color: black;
  margin-bottom: 20px;
}

nav ul li {
  padding: 20px;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

.current {
  border-bottom: 4px solid white;
}

Когда я загружаю приложение, ссылка «Домой» на навигационной панели выделяется белой нижней линией границы, но остается выделенной, даже когда я нажимаю ссылку «О себе» или ссылку «Контакт». Я следил за всем шаг за шагом, но вот эту проблему я не могу понять.

После прочтения реактивного документа о NavLink и многих онлайн-руководств, я все еще не знаю, как это исправить.

Вот когда я нажимаю на ссылку "О нас"

Вот когда я нажимаю ссылку "Контакты"

Вот как пример маршрута учебника

<nav>
    <ul>
      <li><NavLink exact activeClassName = "current" to='/'>Home</NavLink></li>
      <li><NavLink exact activeClassName = "current" to='/about'>About</NavLink></li>
      <li><NavLink exact activeClassName = "current" to='/contact'>Contact</NavLink></li>
    </ul>
  </nav>

Обратите внимание, что ссылка Home остается с активной белой линией под ней, несмотря на то, что это больше не активная ссылка.

Добавление activeClassName = "current" предполагает выделение текущего представления белым подчеркиванием, но домашняя ссылка остается выделенной белым подчеркиванием.

Итак, всем вам с многолетним опытом, пожалуйста, помогите.

Вот мой app.js

    import React, { Component } from 'react';
import './App.css';
import Main from './components/main';
import Navigation from './components/navigation';




class App extends Component {
  render() {
    return (
        <div>
            <h1> React Router </h1>;
            <h5>  import 'BrowserRouter' from 'react-router-dom' in Appjs</h5>
            <hr></hr>

            <Navigation />

            <Main />
            </div>

    );
  }
}

 export default App;

Вот мой index.js

    import React from 'react';
import ReactDOM from 'react-dom';
//Add browserrouter to use it in your app
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

//this router example is from this site 
//https://blog.pusher.com/getting-started-with-react-router-v4/
/*
You can only pass a single child element to a Router,
so it is necessary to create a root component
that renders the rest of your application and
then pass that in as the child of the Router.
*/
ReactDOM.render((
    <BrowserRouter>
        <App />
    </BrowserRouter>
), document.getElementById('root')); 

Вот мой main.js

 import React, { Component } from 'react';
import { NavLink, Switch, Route } from 'react-router-dom';
import Home from './home';
import About from './about'
import Contact from './contact'

class Main extends Component {
    render() {
        return (
            <div>
                <p> My main component </p>
                <Switch>
                    <Route exact = {true}  path='/' component = {Home}></Route>
                    <Route   path='/about' component = {About}></Route>
                    <Route   path='/contact' component = {Contact}></Route>
                    </Switch>
            </div>
        );
    }
}

export default Main;

И, наконец, мой navigation.js

    import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

class Navigation extends Component {
    render() {
        return (
            <div>
            <p> My Navigation component </p>
            <nav>
                <ul>
                    <li><NavLink to='/'> Home </NavLink> </li>
                    <li><NavLink to='/about'> About </NavLink> </li>
                    <li><NavLink to='/contact'> Contact </NavLink> </li>
                </ul>
            </nav>
                </div>
        );
    }
}

export default Navigation;