React-router: Feature request: activeClassName, activeStyle, activeOnlyOnExact props to Link on react-router-dom

[lourd]

I propose adding the activeClassName, activeStyle, and activeOnlyOnExact props to the Link component in react-router-dom v4. I think the use cases for these props are common enough to warrant being added within the library instead of the library consumers making custom link components to accomplish styling when active needs. They have also been in multiple earlier versions of the library.

[moimael]

You can use the NavLink component for this. It's not yet documented but works well: https://github.com/ReactTraining/react-router/blob/v4/packages/react-router-dom/modules/NavLink.js

[pshrmn]

Yes, <NavLink> is what you want. I imagine that it will be documented soon, but for quick reference:

// set the class name
<NavLink to='/some-page' activeClassName='active'>Some Page</NavLink>
// set the style
<NavLink to='/some-other-page' activeStyle={{ color: 'red' }}>Some Other Page</NavLink>
// only when exact
<NavLink exact to='/some-exact-page' activeClassName='active'>Some Exact Page</NavLink>