L1: Installing React Router

Welcome to Module 4! In this module, you'll transform your single-page application into a multi-page website using React Router. Users will be able to navigate between different pages without full page reloads!

What You'll Learn

What client-side routing is and why it's important
How React Router enables navigation in SPAs
Installing and setting up React Router
The difference between traditional and client-side routing

Why We Need React Router

Right now, your entire application lives on one page. Everything happens at the URL http://localhost:5173/. But real websites have multiple pages:

Homepage - Browse all listings
Listing Details - View full information about one listing
Favorites - See saved listings
User Profile - Account settings
404 Page - When page doesn't exist

Traditional vs. Client-Side Routing

How traditional websites work:

User clicks link
    ↓
Browser requests new HTML page from server
    ↓
Server sends entire HTML file
    ↓
Browser reloads page from scratch
    ↓
New page appears (with flash/flicker)

Problems:

❌ Full page reload (slow)
❌ Lose JavaScript state
❌ Flash of white screen
❌ Server must handle every route
❌ Wastes bandwidth

How React Router works:

User clicks link
    ↓
React Router intercepts the click
    ↓
Updates the URL (no server request)
    ↓
React renders the new component
    ↓
Content changes instantly (smooth)

Benefits:

✅ Instant navigation (fast)
✅ Keep JavaScript state
✅ Smooth transitions
✅ Works offline (PWA)
✅ Better user experience

What is React Router?

React Router is the standard routing library for React. It allows you to:

Define multiple pages (routes) in your app
Navigate between pages without reloading
Access URL parameters (like /listing/123)
Handle 404 errors
Create nested routes
Protect routes (authentication)

Think of it as the "GPS" for your React application - it knows where you are and how to get anywhere else!

How React Router Works

Define Routes

Tell React Router which component to show for each URL:

Conceptual Example

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/listing/:id" element={<DetailsPage />} />
  <Route path="/favorites" element={<FavoritesPage />} />
</Routes>

React Router Watches the URL

When the URL changes, React Router:

Looks at the current URL
Finds the matching route
Renders the corresponding component

Components Navigate

Use special components to navigate:

Navigation Example

// Link component - like <a> but without page reload
<Link to="/listing/5">View Listing</Link>

// Or programmatically
const navigate = useNavigate();
navigate('/favorites');

Installing React Router

Let's install React Router in your project!

Stop Your Development Server

If your dev server is running, stop it with Ctrl+C in the terminal.

Install the Package

Run this command in your terminal:

Terminal

npm install react-router-dom

What's being installed:

react-router-dom - React Router for web browsers
Latest version: 6.x (modern, hook-based API)

Note: There's also react-router-native for React Native mobile apps, but we're using react-router-dom for web applications.

Wait for Installation

You'll see output like this:

Terminal Output

added 3 packages, and audited 200 packages in 5s

found 0 vulnerabilities

Verify Installation

Check that it was added to package.json:

package.json

{
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.22.0"
  }
}

Restart Development Server

Start your dev server again:

Terminal

npm run dev

What's Included in React Router?

When you install react-router-dom, you get these key exports:

React Router Versions

Version Differences

React Router has had major API changes:

v5 and earlier - Component-based API (<Switch>, render props)
v6 (current) - Hook-based API (<Routes>, element prop)

Make sure you're following v6 tutorials! The syntax is different from older versions.

v5 vs v6 Quick Comparison

Modern API (v6)

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

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

Key differences:

✅ <Routes> instead of <Switch>
✅ element prop (JSX) instead of component
✅ All hooks included (useNavigate, useParams, etc.)
✅ Nested routes are easier
✅ Relative routing

Old API (v5)

import { BrowserRouter, Switch, Route } from 'react-router-dom';

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/about" component={AboutPage} />
  </Switch>
</BrowserRouter>

Deprecated patterns:

❌ <Switch> (now <Routes>)
❌ component prop (now element)
❌ exact keyword (automatic in v6)
❌ useHistory (now useNavigate)

Routing Terminology

Before we continue, let's define key terms:

Your Application's Future Routes

Here's what we'll build in this module:

Route Structure
│
├─ /                          → HomePage
│  (Browse all listings)
│
├─ /listing/:id               → ListingDetailsPage
│  (View single listing)
│  Examples: /listing/1, /listing/42
│
└─ /*                         → NotFoundPage
   (404 - Page not found)

In later modules, we'll add:

├─ /favorites                 → FavoritesPage (Module 6)
├─ /sign-in                   → SignInPage (Module 7)
├─ /sign-up                   → SignUpPage (Module 7)
└─ /profile                   → ProfilePage (Module 7)

Installation Complete!

React Router is now installed and ready to use! In the next lesson, we'll create the Router component and set up our first routes.

Quick Recap

What we accomplished:

✅ Learned what client-side routing is
✅ Understood why React Router is necessary
✅ Installed react-router-dom package
✅ Learned routing terminology
✅ Saw the route structure we'll build

Key concepts:

Client-side routing - Navigation without page reloads
React Router - The standard routing library for React
Routes - Map URLs to components
URL parameters - Dynamic segments in paths (:id)

What's Next?

In Lesson 2, we'll create the Router component and wrap our application with <BrowserRouter>. This is where the magic begins! 🎉

L1: Installing React Router

Router Components

Route Configuration

Navigation Components

Navigation Hooks

Route

Path

URL Parameter

Navigate / Navigation

On this page