Link and NavLink

Learn to change pages with Link and track active state with NavLink.

Link and NavLink

<Link to="..."> is React Router's basic navigation component. On click, it changes the URL; no page reload.

<NavLink to="..."> is a special variant of Link. When on the active route, it adds the active class to className. This is ideal for highlighting the active item in a menu.

Both take the to prop. Link for plain navigation, NavLink for active highlighting. NavLink is preferred in menus where you want styling.

Menu example

For a navigation menu, NavLink is ideal. <nav><NavLink to="/">Home</NavLink><NavLink to="/about">About</NavLink></nav>.

On the active route, NavLink automatically gets class="active". With CSS .active { '{ font-weight: bold; }' }, the active item appears bold.

This pattern is one of the cleanest ways to show users which page they're on. You get an accessible menu without code clutter.

Exercise Write menu

Complete the skeleton. Write a NavBar component. Inside <nav>, have two NavLinks: <NavLink to="/">Home</NavLink> and <NavLink to="/about">About</NavLink>. Export it. (Assume NavLink is imported.)

Show example solution

function NavBar() {
  return (
    <nav>
      <NavLink to="/">Home</NavLink>
      <NavLink to="/about">About</NavLink>
    </nav>
  );
}

export default NavBar;

Test yourself

Which adds a class on the active route?
- Route
- Link
- BrowserRouter
- NavLink
Show answer

NavLink — NavLink adds a class on active route.

Link prop

Link and NavLink's common prop is ____.

Show answer

Link and NavLink's common prop is to.

Match Link and NavLink

Link

plain
NavLink

active highlight
to

prop
.active

CSS

Next lesson: Summary - Router basics

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies