React Router Link and NavLink

What is Router Link and NavLink in React?

Link renders an anchor that navigates without reloading the page. NavLink does the same but also tells you whether it matches the current URL, which is how you highlight the active navigation item.

Why Router Link and NavLink matters

A plain anchor tag throws away the entire JavaScript application and reloads it. Link intercepts the click, updates history and re-renders only what changed.

Router Link and NavLink example

import { Link, NavLink } from 'react-router-dom';

<Link to="/internships">Browse internships</Link>

<NavLink
  to="/internships"
  className={({ isActive }) => isActive ? 'nav active' : 'nav'}
>
  Internships
</NavLink>

Key points to remember

• to accepts a string or an object with pathname, search and hash.
• NavLink passes isActive and isPending to className and style callbacks.
• Use the replace prop to swap the current history entry instead of pushing a new one.
• Add end to NavLink so "/" does not stay active on every nested route.

Common mistakes with Router Link and NavLink

• Mixing <a href="/page"> with Link in the same app, producing inconsistent full reloads.
• Forgetting end on the home NavLink, so it appears active everywhere.