🔗 Navigation and Links

Navigation, the big picture

Think of navigation in a React app like a good GPS. It doesn't just move you between destinations — it remembers where you've been (the history stack), lets you retrace your route (back/forward), and can quietly reroute you when needed (a redirect after login). React Router gives you two families of tools to build that experience.

The rule of thumb never changes: if a human clicks to go somewhere, use a Link; if your code decides to go somewhere, use useNavigate. Everything below is a variation on those two.

The Link component

<Link> renders a real <a> tag — so it's keyboard-focusable, right-clickable, and openable in a new tab — but it intercepts the click to navigate without a reload. The to prop is all you need for the common case.

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

function Navigation() {
  return (
    <nav>
      {/* Simplest form */}
      <Link to="/">Home</Link>

      {/* to can be an object: path + query + hash */}
      <Link to={{ pathname: '/products', search: '?sort=popular', hash: '#featured' }}>
        Popular products
      </Link>

      {/* Pass data WITHOUT putting it in the URL */}
      <Link to="/dashboard" state={{ from: 'nav' }}>Dashboard</Link>

      {/* Replace the current history entry instead of pushing a new one */}
      <Link to="/login" replace>Login</Link>
    </nav>
  );
}

NavLink & active state

<NavLink> is <Link> that knows whether it points at the current page. Its className and style props accept a function receiving { isActive, isPending }, so you can highlight the active item.

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

function MainNav() {
  return (
    <nav>
      {/* "end" → active ONLY on the exact "/" path, not on every route */}
      <NavLink to="/" end
        className={({ isActive }) => (isActive ? 'active' : '')}>
        Home
      </NavLink>

      {/* style callback also receives isActive / isPending */}
      <NavLink to="/about"
        style={({ isActive }) => ({
          fontWeight: isActive ? 'bold' : 'normal',
          textDecoration: isActive ? 'underline' : 'none',
        })}>
        About
      </NavLink>

      {/* children can be a function too — render an indicator when active */}
      <NavLink to="/products">
        {({ isActive }) => (
          <span>Products {isActive && <span aria-hidden="true">●</span>}</span>
        )}
      </NavLink>
    </nav>
  );
}

Programmatic navigation

When navigation is a consequence of logic — a form submitted, a login succeeded, a timer expired — you can't wait for a click. useNavigate returns a function that moves you in code.

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

function Examples() {
  const navigate = useNavigate();

  const goHome    = () => navigate('/');
  const goLogin   = () => navigate('/login', { replace: true }); // no "back" to here
  const goProfile = () => navigate('/profile', { state: { from: 'dashboard' } });
  const goBack    = () => navigate(-1);  // like the browser back button
  const goForward = () => navigate(1);

  return (
    <div>
      <button onClick={goHome}>Home</button>
      <button onClick={goBack}>Back</button>
    </div>
  );
}

A very common real-world use is redirecting after an async action completes:

function CreatePost() {
  const navigate = useNavigate();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (formData) => {
    setIsSubmitting(true);
    try {
      const newPost = await createPost(formData);
      // Jump straight to the freshly created post
      navigate(`/posts/${newPost.id}`);
    } catch (error) {
      console.error('Failed to create post:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={(e) => { e.preventDefault(); handleSubmit(readForm(e)); }}>
      <button disabled={isSubmitting}>
        {isSubmitting ? 'Creating…' : 'Create Post'}
      </button>
    </form>
  );
}

Reading location & query

Two hooks let you inspect where you are.

useLocation — the current address

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

function LocationAware() {
  const location = useLocation();

  // location.pathname → "/users/123"
  // location.search   → "?tab=profile"
  // location.hash     → "#section1"
  // location.state    → { from: "/dashboard" }  (set via Link/navigate)

  // A classic use: log a page view whenever the URL changes
  useEffect(() => {
    analytics.pageView(location.pathname + location.search);
  }, [location]);

  return <p>You are at {location.pathname}</p>;
}

useSearchParams — read & write the query string

Query strings are perfect for state you want to be shareable and bookmarkable — a search term, a filter, a page number. useSearchParams works like useState, but the "state" lives in the URL.

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

function ProductSearch() {
  const [searchParams, setSearchParams] = useSearchParams();

  // Read (with sensible defaults)
  const query = searchParams.get('q') ?? '';
  const page  = Number(searchParams.get('page') ?? '1');

  // Write — build a fresh URLSearchParams so React re-renders
  const updateQuery = (newQuery) => {
    const params = new URLSearchParams(searchParams);
    params.set('q', newQuery);
    params.set('page', '1');   // reset to first page on a new search
    setSearchParams(params);
  };

  return (
    <div>
      <input
        value={query}
        onChange={(e) => updateQuery(e.target.value)}
        placeholder="Search products…"
      />
      <p>Searching “{query}” — page {page}</p>
    </div>
  );
}

Common patterns

A few navigation recipes come up in nearly every app. Here are three you can lift into your own projects.

1. Breadcrumbs from the path

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

function Breadcrumbs() {
  const { pathname } = useLocation();
  const parts = pathname.split('/').filter(Boolean); // ["users","42","settings"]

  return (
    <nav aria-label="Breadcrumb">
      <ol>
        <li><Link to="/">Home</Link></li>
        {parts.map((part, i) => {
          const to = '/' + parts.slice(0, i + 1).join('/');
          const isLast = i === parts.length - 1;
          return (
            <li key={to}>
              {isLast ? <span aria-current="page">{part}</span>
                      : <Link to={to}>{part}</Link>}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

2. A tab bar with NavLink

function DashboardTabs() {
  const tabs = [
    { to: '/dashboard/overview',  label: 'Overview' },
    { to: '/dashboard/analytics', label: 'Analytics' },
    { to: '/dashboard/reports',   label: 'Reports' },
  ];

  return (
    <div className="tabs" role="tablist">
      {tabs.map(({ to, label }) => (
        <NavLink key={to} to={to} role="tab"
          className={({ isActive }) => `tab ${isActive ? 'active' : ''}`}>
          {label}
        </NavLink>
      ))}
    </div>
  );
}

3. Redirect back to where you came from

function Login() {
  const navigate = useNavigate();
  const location = useLocation();
  // A protected route can send you here with state.from set
  const from = location.state?.from ?? '/dashboard';

  const handleLogin = async () => {
    await logIn();
    navigate(from, { replace: true }); // return to the page they wanted
  };

  return <button onClick={handleLogin}>Log in</button>;
}

Accessible navigation

Navigation is one of the highest-impact places to get accessibility right — it's how everyone, including keyboard and screen-reader users, moves through your app. React Router helps, but a few habits seal the deal.

function AccessibleNav() {
  return (
    // A real <nav> with a label announces its purpose
    <nav aria-label="Main navigation">
      <ul>
        <li>
          {/* NavLink auto-adds aria-current="page" when active */}
          <NavLink to="/" end>Home</NavLink>
        </li>
        <li><NavLink to="/about">About</NavLink></li>
        <li><NavLink to="/contact">Contact</NavLink></li>
      </ul>
    </nav>
  );
}

• Wrap primary navigation in a <nav> with a descriptive aria-label
• Use a real skip-to-content link (like the one at the top of this page) so keyboard users can bypass the menu
• Never build a "link" out of a <div onClick> — <Link> renders a focusable anchor for you

Practice & Quiz

const tabs = [
  { to: '/settings/profile', label: 'Profile' },
  { to: '/settings/billing', label: 'Billing' },
];
// TODO: render a NavLink per tab with an active class

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

function SettingsTabs({ tabs }) {
  return (
    <nav aria-label="Settings" className="tabs">
      {tabs.map(({ to, label }) => (
        <NavLink key={to} to={to}
          className={({ isActive }) => `tab ${isActive ? 'active' : ''}`}>
          {label}
        </NavLink>
      ))}
    </nav>
  );
}

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

function Search() {
  const [params, setParams] = useSearchParams();
  const q = params.get('q') ?? '';

  return (
    <input
      value={q}
      onChange={(e) => {
        const next = new URLSearchParams(params);
        e.target.value ? next.set('q', e.target.value) : next.delete('q');
        setParams(next);
      }}
      placeholder="Search…"
    />
  );
}

Best Practices & Pitfalls

✅ Do

• Use <Link>/<NavLink> for user clicks; reserve useNavigate for logic-driven redirects
• Add end to any NavLink whose path is a prefix of others (especially "/")
• Store shareable UI state (search, filters, page) in the query string with useSearchParams
• Use { replace: true } after logins and redirects so Back doesn't return to a dead end
• Keep navigation in semantic <nav> + list markup and let NavLink supply aria-current

❌ Don't

• Build clickable navigation from <div onClick> — it's inaccessible and un-focusable
• Put sensitive data in the URL or in state expecting it to survive a refresh (state won't)
• Mutate searchParams in place — build a new URLSearchParams so React re-renders
• Reach for useNavigate where a plain <Link> would do — you'd lose right-click and new-tab support

Summary

📚 Additional Resources

• React Router — Navigating (Link, NavLink, useNavigate)
• React Router — useSearchParams
• MDN — The navigation ARIA role

🚀 What's Next?

You can now move users anywhere and highlight where they are. Next we compose routes inside routes: the Nested Routes lesson builds multi-level layouts where a parent screen keeps its shell while child routes swap through a shared <Outlet />.