score:52

Accepted answer

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.

score:0

I am learning React now and just came across the same problem. I tried the following and it worked for me.

So, I have 3 navigational links.

<li><NavLink to="/home">Home</NavLink></li>
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/contact">Contact</NavLink></li>

But I added 4 routes.

<Route exact path="/" component={Home}></Route>
<Route path="/home" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/contact" component={Contact}></Route>

I added 2 routes (/ and /home) for the same component (Home). This way, the react-router-dom seems to add the class 'active' only to the link that you click.

score:0

If you're trying to use <Navlink> on single page website and anchor-links, make sure to replace <BrowserRouter> with <HashRouter>!

I had to remove the slash to reach my anchor text: <HashRouter hashType='noslash'>

With this setup,

<li><NavLink to="about">About</NavLink></li>

will render

<a href="#about" aria-current="page" class="active">About</a>

Documentation

score:0

I am using LinkContainer from react-router-bootstrap, I was still having an issue like this. The home link was always active.

I have solved it by using an exact keyword for the path of the link like this. I hope if you will use this and have any issue regarding this, so it can help. cheers.

Header.js component :

  <LinkContainer to="/" exact>
     <Nav.Link>
       <i className="fas fa-home mr-1"></i>Home
     </Nav.Link>
  </LinkContainer>

and App.js component :

 <Route path="/" component={HomeScreen} exact />
 <Route path="/about" component={AboutScreen} exact />
 <Route path="/blogs" component={BlogScreen} exact />

score:1

Working fine for me

<ul className="menu nav navbar-nav">
      <li><NavLink exact to="/" activeClassName="active-link active2">Home</NavLink></li>
      <li><NavLink to="/financial-summary" activeClassName="active-link active2">Financial Summary</NavLink></li>
      <li><NavLink to="/account-statement" activeClassName="active-link active2">Account Statement</NavLink></li>
      <li><NavLink to="/tools" activeClassName="active-link active2">Tools</NavLink></li>
      <li><NavLink to="/service-charges" activeClassName="active-link active2">Service Charges & Important Information</NavLink></li>
    </ul>

css

.active2, .active2 a:link, .active2 a:visited{
    background: #004B8D !important;
    color: #FFFFFF !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

score:2

I recently came across this issue and solved it by simply adding:

import { withRouter } from 'react-router-dom';

and then wrapped the component with:

export default withRouter(Component);

score:2

Change in your code

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

and then

const checkActive = (match, location) => {
  console.log(location);
  if (!location) return false;
  const { pathname } = location;
  const { url } = match;
  return pathname === url ? true : false;
};
  • note *
const { pathname } = location;
const { url } = match;
return pathname === url ? true : false;

score:17

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>

score:45

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

Related Query

More Query from same tag