Routing Project

⚛️ React 18+ 🟢 Chapter 27 of 39 📂 Phase 11: Routing 📅 2026 Edition

📌 Covered in this chapter: Build a Course Website · Home Page · Course List · Course Details · Login Page · Protected Dashboard · 404 Page · Navigation Menu

This chapter ties together everything from Chapters 1-26 into one realistic project: a small course website with public pages, a login flow, and a protected dashboard route.

1Planning the Route Structure

/ → Home /courses → CourseList /courses/:id → CourseDetail /login → Login /dashboard → Dashboard (protected) * → NotFound (404)

Sketching out routes like this before writing code — a habit worth building, echoing the planning advice from earlier component-design chapters — makes the actual implementation far more straightforward.

2Wiring Up the Full App

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { useState } from "react";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <BrowserRouter>
      <NavBar isLoggedIn={isLoggedIn} />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/courses" element={<CourseList />} />
        <Route path="/courses/:id" element={<CourseDetail />} />
        <Route path="/login" element={<Login onLogin={() => setIsLoggedIn(true)} />} />
        <Route
          path="/dashboard"
          element={isLoggedIn ? <Dashboard /> : <Navigate to="/login" />}
        />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

The path="*" wildcard route always matches last, catching any URL that didn't match an earlier, more specific route — this is the standard way to build a 404 Not Found page.

3Building the 404 Page and Breadcrumbs

function NotFound() {
  return (
    <div>
      <h2>404 - Page Not Found</h2>
      <Link to="/">Go back home</Link>
    </div>
  );
}

function CourseDetail() {
  const { id } = useParams();
  return (
    <div>
      <nav><Link to="/">Home</Link> / <Link to="/courses">Courses</Link> / Course {id}</nav>
      <h2>Course #{id}</h2>
    </div>
  );
}

⚠️ Forgetting the Wildcard 404 Route or Placing It First

Skipping a path="*" route means unmatched URLs render nothing at all, confusing users. Placing it before your other routes is equally broken — React Router (v6+) matches top-to-bottom, so the wildcard would swallow every URL. Always place it last, as the final <Route>.

💻 Hands-on Interactive Practice Challenge

Extend the project structure above by adding a simple isLoggedIn-based conditional in the NavBar to show either a Login link or a Dashboard link.

React Practice Challenge ▶ Run in Compiler

function NavBar({ isLoggedIn }) {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/courses">Courses</Link>
      {isLoggedIn ? (
        <Link to="/dashboard">Dashboard</Link>
      ) : (
        <Link to="/login">Login</Link>
      )}
    </nav>
  );
}

Run This Challenge in Online JS IDE →

❓ Frequently Asked Questions (FAQ)

Q Should isLoggedIn really just be a piece of useState like this?

For a learning project, yes — this keeps the example focused on routing. A real production app would typically manage authentication state via Context (Chapter 24) or a dedicated auth library, so it's accessible app-wide without prop drilling.

Q Can nested routes share a common layout, like a persistent sidebar?

Yes — React Router supports 'layout routes' using a parent Route with an component, where child routes render inside that shared layout. This is a natural next step once you're comfortable with the basics covered here.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on React 18+ · Last updated August 2026