This release of react-router-dom adds support for passing a function to either the className or style props to conditionally apply values based on the link's active state.

This provides similar functionality as the existing activeClassName and activeStyle props, but is a bit more powerful. For example, you can now easily apply styles exclusively to an inactive NavLink as well. This offers a nicer experience for folks who use utility class-based CSS tools such as Tailwind.

function Comp() {
  return (
    <NavLink
      to="/"
      className={isActive =>
        `px-3 py-2 ${isActive ? 'text-gray-200' : 'text-gray-800'}`
      }
    >
      Home
    </NavLink>
  );
}

Note that as of v6.0.0-beta.3, the activeClassName and activeStyle props are removed completely. Adding support for functional className and style props to both v5 and v6 will give v5 users an easier upgrade path.

Thanks to @tim-phillips for raising the issue that inspired the change! 🥳