Navigation with Link and NavLink
In this page:
Link vs. a Plain Anchor Tag
A plain <a href='/about'> makes the browser do a full page reload, throwing away all React state. <Link to='/about'> looks the same visually but intercepts the click and updates the URL without reloading, keeping the app instantly responsive.
Note: Anywhere you'd normally reach for <a href>, use <Link to> instead inside a React Router app.
Warning: Link's prop is called to, not href — using href on Link does nothing.
Example: Link vs. a Plain Anchor Tag
// Run in your local React project (npm install required)
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
function Home() { return <p>Home</p>; }
function About() { return <p>About</p>; }
function App() {
return (
<BrowserRouter>
<Link to="/">Home</Link> | <Link to="/about">About</Link>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Highlighting the Active Link with NavLink
NavLink works just like Link but also knows whether its to path matches the current URL. It passes an isActive flag to a function-as-className (or function-as-style) prop, letting you visually highlight whichever link matches the page currently shown.
Note: className can be a function receiving {isActive}, returning a different class string for the active vs inactive state.
Warning: Don't reach for NavLink everywhere by habit — use plain Link when you don't need active-state styling, to keep things simple.
Example: Highlighting the Active Link with NavLink
// Run in your local React project (npm install required)
import { NavLink } from 'react-router-dom';
function Nav() {
return (
<NavLink to="/about" className={({ isActive }) => isActive ? "active-link" : ""}>
About
</NavLink>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Linking with Dynamic Paths
A Link's to prop can be built dynamically, like /users/${'{'}user.id{'}'}, to point at a specific item's page. This is how list items (like a user list) each link to their own detail page.
Note: Template literals make building dynamic to paths straightforward and readable.
Warning: Forgetting a leading slash in a dynamic path (e.g. users/${'{'}id{'}'} instead of /users/${'{'}id{'}'}) can produce an unexpected relative URL.
Example: Linking with Dynamic Paths
// Run in your local React project (npm install required)
import { Link } from 'react-router-dom';
function UserList({ users }) {
return (
<ul>
{users.map(u => <li key={u.id}><Link to={`/users/${u.id}`}>{u.name}</Link></li>)}
</ul>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Using a plain <a href> instead of <Link to>, causing a full page reload and losing app state.
- Forgetting NavLink is different from Link — NavLink adds an active styling hook, Link doesn't.
- Not using the to prop correctly (it's to, not href, on Link).
- Link renders an anchor tag but intercepts the click to navigate client-side instead of reloading.
- NavLink is a special version of Link that knows when it points at the currently active route.
- Both come from react-router-dom and only work inside a BrowserRouter.
- Client-side navigation preserves React state that a full page reload would wipe out.
Requires npm install react-router-dom — not available via CDN in this sandbox.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: