CODEWITHSUNDEEP
reactjsreact-routerreact-router-v4
Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

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>

Upvotes: 1

Views: 1260

Answers (1)

Andy_D
Andy_D

Reputation: 4228

Make a wrapper? 

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

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

Upvotes: 2

Related Questions