MENU

<NavLink>

<NavLink> is a special version of <Link> that knows whether it's "active" (its "to" matches the current URL) or "pending" (its destination is loading, in data/framework mode), and lets you style itself accordingly.

Attributes:

to: String

the destination URL.

className: String, or a function

<NavLink> automatically applies an "active" class (and a "pending" class in data/framework mode) to the rendered <a> for you. To customize this instead of relying on the default class names, pass a function: ({ isActive, isPending }) => isActive ? "my-active-class" : "". This replaces the old "activeClassName" attribute, which no longer exists.

style: CSS object, or a function

Styles can likewise be applied dynamically via a function: ({ isActive, isPending }) => ({ color: isActive ? "red" : "black" }). This replaces the old "activeStyle" attribute.

children: a function

Children can also be a function receiving the same { isActive, isPending, isTransitioning } object, letting you change the rendered content itself (not just its class or style) based on active state.

end: bool

whether to apply "active"/"pending" styling only when the location matches exactly to the end of "to". If false (the default), a <NavLink to="/a"> is also considered active while at "/a/b/c". This replaces the old "exact" attribute.

caseSensitive: bool

whether to consider the case of the location's pathname when determining active state. This replaces the old "strict"/case-sensitivity handling.

The old "isActive(match, location)" attribute, which let you supply fully custom matching logic, no longer exists – <NavLink> computes isActive/isPending itself from "to", "end", and "caseSensitive". If you need custom matching logic beyond that, build your own link component with useMatch() instead (see Custom Link).

aria-current: NavLink automatically sets aria-current="page" on the rendered link while it is active, for accessibility. (This is a standard ARIA attribute with several other possible values – "step", "location", "date", "time", "true", "false" – for other kinds of current-item indicators, but NavLink itself only ever sets "page".)

<NavLink
  to="/events/123"
  end
  style={({ isActive }) => ({
    fontWeight: isActive ? "bold" : "normal",
    color: isActive ? "red" : "black",
  })}
>
  Event 123
</NavLink>

<NavLink
  to="/events/123"
  end
  style={({ isActive }) => ({
    fontWeight: isActive ? "bold" : "normal",
    color: isActive ? "red" : "black",
  })}
>
  Event 123
</NavLink>