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} />