activeClassName in react router is highlighting two NavLinks at the same time

The Navlink also needs an exact on it... Change to this:

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='/' activeClassName="current" exact={true}> Home </NavLink> </li>
            <li><NavLink to='/about' activeClassName="current"> About </NavLink> </li>
            <li><NavLink to='/contact' activeClassName="current"> Contact </NavLink> </li>
          </ul>
        </nav>
      </div>
    );
  }
}

export default Navigation;

You should add the exact property to your root("\") Route, otherwise, it will match every route starting with "\", React Router exact

eg:

<Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/topics" component={Topics} />