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?