Root Navlink always get active class React Router Dom

Question

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?

Answer 1

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.