React & Modern Frontend (445 Qs)•Part 10: Modern React 18, React 19 & Next.js Patterns (317 - 353)
What is the difference between Link, NavLink, and <a>?
All three render an anchor tag in the DOM, but they behave very differently when clicked:
| Aspect | <a href> | <Link to> | <NavLink to> |
|---|---|---|---|
| Navigation | Full page reload — browser makes a fresh request and the whole app (JS, CSS) reloads | Client-side navigation via History API — no reload, app state is preserved | Same as Link — client-side, no reload |
| Active styling | None built-in | None built-in | Automatically knows if it matches the current URL and exposes that via a class/style/children render function |
| Typical use | Linking to external sites/domains outside the app | Regular in-app navigation (e.g., a card linking to a detail page) | Navigation menus/tabs where you need to highlight the current section |
jsx
import { Link, NavLink } from "react-router-dom";
// Plain in-app link — no active-state awareness
<Link to="/about">About</Link>;
// NavLink automatically applies the "active" class (or your own style function)
// when the current URL matches "/dashboard"
<NavLink
to="/dashboard"
className={({ isActive }) => (isActive ? "nav-link active" : "nav-link")}
>
Dashboard
</NavLink>;
// Plain <a> — causes a full browser navigation/reload, breaks SPA behavior
<a href="/dashboard">Dashboard (avoid for in-app links)</a>;
Rule of thumb: use <Link>/<NavLink> for any route inside your React Router tree, and reserve a plain <a href> for links leaving your app (external URLs, mailto:, downloadable files) or for non-SPA full-reload cases.