React Router — Multi-Page Navigation (React 19+)

This lesson introduces React Router — the standard library for client-side routing in React SPAs. You will install react-router-dom, define routes, navigate with Link, read URL parameters, and structure a small multi-page app.

Prerequisites: Lessons 1–6 with a Vite React project. Estimated time: 50–60 minutes.

1. Why Client-Side Routing?

Without a router, a React app is a single view. Users expect URLs like /about and /users/42 that work with bookmarks and the back button. React Router maps URLs to components without full page reloads.

2. Install react-router-dom

npm install react-router-dom

React Router v6+ is the current API. It works with Vite and React 19 out of the box.

3. Basic Route Setup

Wrap your app in BrowserRouter and define routes in main.jsx or App.jsx:

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

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

export default App;

Create simple page components under src/pages/ — each returns a heading and paragraph for now.

4. Link and NavLink

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <NavLink
        to="/about"
        style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}
      >
        About
      </NavLink>
    </nav>
  );
}

Use Link instead of <a href> for internal routes — it prevents full reloads. NavLink adds an isActive callback for styling the current page.

5. URL Parameters

// Route definition
<Route path="/lessons/:slug" element={<LessonDetail />} />

// LessonDetail.jsx
import { useParams } from 'react-router-dom';

function LessonDetail() {
  const { slug } = useParams();
  return <h1>Lesson: {slug}</h1>;
}

Dynamic segments (:slug) are common for blog posts, product pages, and user profiles — core patterns in a react router tutorial.

6. Layout Routes with Outlet

function Layout() {
  return (
    <>
      <Navbar />
      <main>
        <Outlet />
      </main>
    </>
  );
}

// Routes
<Route element={<Layout />}>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Route>

Outlet renders the matched child route — shared nav and footer without duplicating markup.

7. Programmatic Navigation

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

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

  function onSuccess() {
    navigate('/dashboard', { replace: true });
  }
}

Use navigate after form submit or logout. replace: true avoids stacking history entries.

8. Vite and Production Deploy

For SPAs on static hosts, configure the server to fallback to index.html for unknown paths — otherwise refreshing /about returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).

9. Next Steps

You now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials for a full-framework comparison, or join Alkademy for live React projects.

Series: Lesson 6 · Tutorial hub

Frequently Asked Questions

What is React Router used for?
React Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.

React Router vs Next.js routing?
React Router is client-side only — ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.

How do I protect routes that require login?
Create a wrapper component that checks auth state and redirects with Navigate to="/login" or useNavigate when the user is not authenticated.