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 |

     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.