Function NavLink

Wraps <Link> with additional props for styling active and pending states.

• Automatically applies classes to the link based on its active and pending states, see NavLinkProps.className.
• Automatically applies aria-current="page" to the link when the link is active. See aria-current on MDN.

import { NavLink } from "react-router"
<NavLink to="/message" />
Copy

States are available through the className, style, and children render props. See NavLinkRenderProps.

<NavLink
  to="/messages"
  className={({ isActive, isPending }) =>
    isPending ? "pending" : isActive ? "active" : ""
  }
>
  Messages
</NavLink>
Copy