Master Table of Contents

• See full index in [01. Introduction]

Who this chapter is for

• Learners moving from “single screen demo” into real multi-page app flow
• Beginners who want clean navigation, not route spaghetti
• Anyone who wants app structure that still makes sense after 3+ features

What you’ll learn

• React Router fundamentals with a practical mental model
• Dynamic route params and nested routing patterns
• How to organize pages, layouts, and route constants cleanly

Why this topic matters

Routing is where app architecture becomes visible. If routing is messy, everything feels messy.

Good routing gives users predictable navigation and gives developers a codebase that is easier to grow. This chapter helps you avoid “works for now” structure that becomes painful later.

Core concepts

SPA routing

• URL changes without full page refresh
• Route-to-component mapping

In React, routes are UI states mapped to URLs.

Route params

• Dynamic paths like /users/:id
• Useful for detail pages

Params let one page template handle many records (product, user, article, etc.).

Shared layouts

• Keep header/sidebar/footer consistent
• Render page content via outlet pattern

Shared layouts reduce duplication and keep your UI consistent across pages.

Step-by-step walkthrough

Step 1 — Install and configure router

Create app shell + core routes (/, /about, fallback route).

Step 2 — Add dynamic routes

Add a detail route with params, then read params inside the page.

Step 3 — Apply layout architecture

Move repeated layout parts (header/nav/footer) into one shared layout.

Goal: route setup that is easy to scan and easy to extend.

Practical examples

Example 1 — Basic route setup

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/about" element={<AboutPage />} />
</Routes>

Tip:

• Keep route declarations grouped in one place early in the project.

Example 2 — Dynamic route

<Route path="/products/:productId" element={<ProductDetailPage />} />

Real-world follow-up:

• Read productId, fetch detail data, and handle loading/error/empty states.

Common mistakes and how to avoid them

• Hardcoding route strings in many files -> centralize route constants
• Skipping 404 fallback route -> add not-found route from day one
• Mixing reusable UI components with page logic -> keep boundaries clean
• Deeply nesting folders too early -> start simple, then evolve by feature

Mini Project

• Build a multi-page app with:
• Home page,
• About page,
• Product Detail page using params,
• shared layout with top navigation,
• 404 page.

Bonus:

• Add active-link styling so users know where they are.

Quick practice

• Add one route with URL params
• Create a layout wrapper with navigation links
• Add a simple 404 page route
• Create and use a routes.ts constants file

Key takeaways

• Routing is both a UX concern and an architecture concern
• Shared layouts keep pages consistent and reduce duplication
• Clean route organization saves you refactor pain later

Next step

Continue to [13. State Management Patterns].