Root Navlink always get active class React Router Dom

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.

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