Building a Multi-Page SPA with React RouterEntry 6 of 20

Active Links with <NavLink> and end

<NavLink> is a <Link> that knows whether it's active, for highlighting the current page in navigation.

Notes

  • className (and style) accept a function that receives { isActive, isPending }.
  • By default, a NavLink is active when the current URL starts with its to path, so / would be active on every page.
  • end makes it active only on an exact match: with end, /events is not active on /events/123.
  • NavLink adds an active class by default, so .active in CSS often works without a function.

What / Why / When

What

Navigation links with active state.

Why

Users see where they are.

When

Main navigation bars, tabs, sidebars.

Code compare

React
// components/MainNavigation.tsximport { NavLink } from "react-router";import classes from "./MainNavigation.module.css";​export default function MainNavigation() {  return (    <header className={classes.header}>      <nav>        <ul className={classes.list}>          <li>            <NavLink              to="/"              className={({ isActive }) => (isActive ? classes.active : undefined)}              end            >              Home            </NavLink>          </li>          <li>            <NavLink              to="/events"              className={({ isActive }) => (isActive ? classes.active : undefined)}            >              Events            </NavLink>          </li>        </ul>      </nav>    </header>  );}
Angular
@Component({  selector: "app-main-navigation",  imports: [RouterLink, RouterLinkActive],  template: `    <header>      <nav>        <ul>          <li>            <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"              >Home</a            >          </li>          <li>            <a routerLink="/events" routerLinkActive="active">Events</a>          </li>        </ul>      </nav>    </header>  `,})export class MainNavigationComponent {}

Quick reference

ReactAngular
<NavLink>routerLink + routerLinkActive
className={({ isActive }) => ...}routerLinkActive="active"
end[routerLinkActiveOptions]="{ exact: true }"