Search code examples
reactjsreact-routerreact-router-v4

Set default activeClassName for NavLink in React Router v4

Is there a way to set a default activeClassName for NavLink in React Router v4 instead of having to set it for each NavLink?

<NavLink activeClassName='active' to='/one/'>one</NavLink>
<NavLink activeClassName='active' to='/two/'>two</NavLink>
<NavLink activeClassName='active' to='/three/'>three</NavLink>

It would be nice to just write:

<NavLink to='/one/'>one</NavLink>
<NavLink to='/two/'>two</NavLink>
<NavLink to='/three/'>three</NavLink>
Solution

  • Make a wrapper? 

    const MyNavLink = ({ children, ...props }) => (
  <NavLink activeClassName="active" {...props}>
    {children}
  </NavLink>
);

<MyNavLink to='/one/'>one</MyNavLink>