Q:

Root Navlink always get active class React Router Dom

I am using react-router-dom: 4.2.2. I can add activeClassName to the current URL. But surprisingly the class is always added to root URL. 
While visiting a page, for example the error page like the screenshot below, the home navlink also getting the activeClass. 

Update: In the above screenshot I have showed that I visited http://localhost:3000/#/error. So, the active-link should be added to the Love Error? NavLink only. But as you can see it is also added to Home NavLink too.
Here is my navbar code:
import React from 'react';
import { NavLink } from 'react-router-dom';

export const NavigationBar = () => (
  <ul className="horizontal-menu">
    <li> <NavLink to = '/' activeClassName="active-link">Home</NavLink> </li>
    <li> <NavLink to = '/about' activeClassName="active-link">About Us</NavLink> </li>
    <li> <NavLink to = '/error' activeClassName="active-link">Love Error?</NavLink> </li>
  </ul>
)

For routing I have used the following Switch:
<Switch>
  <Route exact path = '/' component = {Home} />
  <Route exact path = '/about' component = {AboutUs} />
  <Route exact path = '/error' component = {Error404} />
  <Route path = "/news/:id" component = {NewsDetail} />
  <Route path="*" component={Error404} />
</Switch>

How can I get the expected behavior? 

A:

You have to use isActive={} to add additional verification to ensure whether the link is active.
document
Working jsFiddle. (fiddle is not created by me)
Code you need to add is like below
Example in jsfiddle
<li><NavLink to="/" isActive={checkActive}>Home</NavLink></li>

Change in your code
<li> <NavLink to='/' activeClassName="active-link" isActive={checkActive}>Home</NavLink> </li>

check the isActive prop and "checkActive" is a function.
const checkActive = (match, location) => {
    //some additional logic to verify you are in the home URI
    if(!location) return false;
    const {pathname} = location;
    console.log(pathname);
    return pathname === "/";
}

Another config you can use is "exact" but It is not possible to demonstrate it in a jsFiddle. 
I think the code would be like 
<li> <NavLink exact to='/' activeClassName="active-link">Home</NavLink> </li>

Hope this helps. And let me know if you need more info.

A:

I've found that adding exact before the first activeClassName works as well. So for example, your set up can be:
export const NavigationBar = () => (
  <ul className="horizontal-menu">
    <li><NavLink to='/' exact activeClassName="active-link">Home</NavLink> 
    </li>
    ....remaining NavLinks
  </ul>
)

A:

You can use exact keyword for active class such as
<NavLink exact to ='/'>Home</NavLink>

it will generate like that 
<a href="/" class="active" aria-current="page">Home</a>

and if you will get another page then it will be like that
<a href="/">Home</a>

