Root Navlink always get active class React Router Dom

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>

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>
)

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.