The Link component renders an anchor tag for client-side navigation between routes, updating the URL and rendered content without triggering a full page reload.

Syntax

<Link to="/about">About</Link>

Deep Dive Course

Link renders as an actual <a> element in the DOM, preserving standard accessibility and behaviors like middle-click-to-open-in-new-tab, but intercepts a regular left-click to perform client-side navigation via the History API instead of letting the browser's default full-page navigation happen. The to prop specifies the destination path, accepting either a plain string or an object with pathname/search/hash for more structured URLs, and NavLink, a specialized variant, additionally applies a distinguishing style or class automatically when its target path matches the current URL, commonly used for highlighting the active item in a navigation menu.

1Understanding Link

💡

Use NavLink instead of Link specifically when you need to automatically style the currently active navigation item — it handles that active-state comparison for you, rather than you needing to compare the current path against each link's target manually.

editor.html

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

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

localhost:3000

2Practical Example

Here is a real-world application of Link showing how it is used in production React code.

editor.html

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

function Nav() {
  return (
    <NavLink to="/about" className={({ isActive }) => isActive ? 'active-link' : ''}>
      About
    </NavLink>
  );
}

// When the current URL is /about:

localhost:3000

3Best Practices

Follow these guidelines when working with Link:

1. Use Link, or NavLink, instead of a plain <a> tag for any internal navigation, so it stays client-side and doesn't trigger a full page reload

2. Use NavLink over plain Link specifically when a navigation item needs to visually indicate it's the currently active route

3. Reserve plain <a> tags for genuinely external links, or resource links like a PDF download, where full-page browser navigation is actually the intended, correct behavior

⚠️

Tip: Use NavLink instead of Link specifically when you need to automatically style the currently active navigation item — it handles that active-state comparison for you, rather than you needing to compare the current path against each link's target manually.

editor.html

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

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

localhost:3000

Examples

Example 01Basic Usage

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

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

Example 02Advanced Example

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

function Nav() {
  return (
    <NavLink to="/about" className={({ isActive }) => isActive ? 'active-link' : ''}>
      About
    </NavLink>
  );
}

// When the current URL is /about:

Best Practices

Use Link, or NavLink, instead of a plain tag for any internal navigation, so it stays client-side and doesn't trigger a full page reload
Use NavLink over plain Link specifically when a navigation item needs to visually indicate it's the currently active route
Reserve plain tags for genuinely external links, or resource links like a PDF download, where full-page browser navigation is actually the intended, correct behavior

Interview Question

Why does React Router's Link component still render as an actual <a> element, rather than something like a span or button with an onClick handler, even though it needs to intercept normal browser navigation?▼

Hint: Think about what native browser and assistive-technology behaviors an actual anchor tag provides for free, that a click-handled span or button wouldn't.

An actual <a> element comes with a range of native browser and accessibility behaviors built in for free: it's keyboard-focusable and activatable with Enter by default, screen readers announce it specifically as a link so users know what to expect, middle-clicking or Ctrl/Cmd-clicking it opens the destination in a new tab exactly as users expect from any other link, and hovering it shows the destination URL in the browser's status bar. Rendering Link as a span or button with just an onClick handler would silently lose every one of these expected link behaviors, degrading both accessibility and the standard, expected browser experience around links. Link is specifically designed to render a genuine <a> tag with a real href attribute for exactly this reason, while additionally intercepting a plain left-click specifically to perform client-side navigation instead of letting the browser's default full-page request happen, preserving all the standard link behaviors while still avoiding the full-page reload.

Exercises

MediumPractice using Link in a real scenario.

View Solution

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

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

Frequently Asked Questions

An actual element comes with a range of native browser and accessibility behaviors built in for free: it's keyboard-focusable and activatable with Enter by default, screen readers announce it specifically as a link so users know what to expect, middle-clicking or Ctrl/Cmd-clicking it opens the destination in a new tab exactly as users expect from any other link, and hovering it shows the destination URL in the browser's status bar. Rendering Link as a span or button with just an onClick handler would silently lose every one of these expected link behaviors, degrading both accessibility and the standard, expected browser experience around links. Link is specifically designed to render a genuine tag with a real href attribute for exactly this reason, while additionally intercepting a plain left-click specifically to perform client-side navigation instead of letting the browser's default full-page request happen, preserving all the standard link behaviors while still avoiding the full-page reload.

Related Functions

routebrowserrouterusenavigate