Navigation

Introduction

Defining routes is only half the story — users also need a way to move between them. A plain HTML <a> tag would reload the entire page from the server, throwing away all of React's in-memory state and defeating the purpose of a single-page application.

React Router provides its own navigation tools that update the URL and swap the matched route without a full page reload: the <Link> and <NavLink> components for user-clickable navigation, and the useNavigate() hook for navigating from code. This lesson covers both, plus how to catch unmatched URLs with a 404 page.

The <Link> Component

<Link> renders an accessible <a> element under the hood, but intercepts the click so React Router can update the URL and swap routes without asking the browser to reload the page.

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

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

export default Nav;

The <NavLink> Component

<NavLink> behaves exactly like <Link>, but it also knows whether it matches the current URL. It automatically adds an "active" class (or lets you compute styles/classes yourself) to whichever link corresponds to the page the user is currently viewing — perfect for highlighting the current tab in a navbar.

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

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

export default NavBar;

Programmatic Navigation with useNavigate

Sometimes navigation should not wait for a click — for example, redirecting a user to a dashboard right after a form submits successfully. The useNavigate() hook returns a function you can call from anywhere in your component logic to change routes.

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

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

  function goToDashboard() {
    navigate('/dashboard');
  }

  return <button onClick={goToDashboard}>Go to Dashboard</button>;
}

Example: Redirect After Login

A common real-world use case is redirecting the user only after an async operation succeeds, such as a login request. useNavigate() lets you call navigate() inside the success branch of that logic.

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

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const navigate = useNavigate();

  async function handleSubmit(e) {
    e.preventDefault();
    const success = await fakeLogin(email, password);

    if (success) {
      navigate('/dashboard');
    } else {
      setError('Invalid email or password.');
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input value={password} onChange={(e) => setPassword(e.target.value)} type="password" placeholder="Password" />
      {error && <p className="error">{error}</p>}
      <button type="submit">Log In</button>
    </form>
  );
}

Catch-All Not Found Route

When a user visits a URL that does not match any defined route — a typo, an old bookmark, a broken link — you want to show a friendly 404 page instead of a blank screen. React Router supports this with a wildcard path of "*", which matches any URL that no earlier route matched.

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

export default App;

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Navigation is what turns a set of defined routes into an actual usable application. <Link> and <NavLink> handle click-driven navigation, while useNavigate() gives you full control to redirect users from within your own logic.

In this lesson, you learned how <Link> and <NavLink> work, how to navigate programmatically with useNavigate(), and how to build a catch-all 404 route. Next, you will learn how to lazy load route components so users only download the code they actually need.