L2: Setting Up the Router

Now that React Router is installed, let's set up the routing infrastructure for your application! We'll create a Router component and wrap our app with BrowserRouter.

What You'll Learn

How to set up BrowserRouter in your app
Creating a centralized Router component
Understanding the routing hierarchy
Preparing for route definitions

Understanding BrowserRouter

BrowserRouter is the foundation of React Router. It must wrap your entire application to enable routing.

How It Works

Conceptual Overview

<BrowserRouter>
  {/* 
    Everything inside has access to routing features:
    - useNavigate hook
    - useParams hook  
    - Link component
    - Route definitions
  */}
  <App />
</BrowserRouter>

Router Context

BrowserRouter creates a React Context that provides routing data to all components below it. This is why it must be at the root of your app!

Two Approach Options

You can set up routing in two ways:

Create a separate Router component (Recommended)

Pros:

✅ Clean separation of concerns
✅ Easy to modify routes
✅ Testable in isolation
✅ Follows single responsibility principle

Structure:

src/components/Router.jsx

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

export default function Router() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Route definitions here */}
      </Routes>
    </BrowserRouter>
  );
}

src/App.jsx

import Router from './components/Router';

function App() {
  return <Router />;
}

We'll use this approach!

Put routing directly in App.jsx

Pros:

✅ Fewer files
✅ Simpler for small apps

Cons:

❌ App.jsx becomes bloated
❌ Harder to maintain

Structure:

src/App.jsx

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Route definitions here */}
      </Routes>
    </BrowserRouter>
  );
}

This works, but isn't ideal for larger apps.

Step 1: Create the Router Component

Create the File

Create a new file for the Router:

Terminal

touch src/components/Router.jsx

Build the Basic Structure

Add this code to Router.jsx:

src/components/Router.jsx

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

export default function Router() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Routes will be defined here in the next lessons */}
      </Routes>
    </BrowserRouter>
  );
}

What's happening:

Import statements - Getting routing components from React Router
BrowserRouter - Enables routing for the entire app
Routes - Container for all route definitions
Route - Individual routes will go inside (next lesson)

Understanding the Imports

Let's break down each import:

Step 2: Update App.jsx

Now let's use our new Router component in App.jsx.

Current App.jsx

Your App.jsx currently looks like this:

src/App.jsx (Current)

import HomePage from './pages/HomePage';

function App() {
  return <HomePage />;
}

export default App;

It directly renders HomePage. We'll change this!

Update with Router

Replace the content with:

src/App.jsx (Updated)

//import Router from './components/Router';
//import HomePage from './pages/HomePage';

function App() {
  //return <HomePage />;
  //return <Router />;
}

export default App;

What changed:

Removed direct HomePage import
Imported Router component
Rendering Router instead of HomePage

Complete Updated App.jsx

Your App.jsx should now look like this:

src/App.jsx

import Router from './components/Router';

function App() {
  return <Router />;
}

export default App;

Simple and clean! All routing logic is now contained in the Router component.

Step 3: Verify the Setup

Let's make sure everything is working:

Check Your Browser

Open your browser and go to http://localhost:5173/

You should see: A blank page (this is expected!)

Why blank? We haven't defined any routes yet. The <Routes> component is empty, so nothing renders.

Check for Errors

Open your browser's developer console (F12):

Expected: No errors

If you see errors:

Understanding the Routing Hierarchy

Your application now has this component structure:

App
 └─ Router
     └─ BrowserRouter (provides routing context)
         └─ Routes (matches URL to routes)
             └─ Route (individual routes)
                 └─ Component (HomePage, DetailsPage, etc.)

Context Flow

Routing context flows down from BrowserRouter:

BrowserRouter (creates context)
    ↓
Routes (consumes context, matches URL)
    ↓
Your Components (can use routing hooks)

File Structure Check

Your project should now have this structure:

App.jsx

main.jsx

Router.jsx

PropertyCard.jsx

Spinner.jsx

ErrorMessage.jsx

✅ Created a Router component
✅ Set up BrowserRouter and Routes
✅ Updated App.jsx to use Router
✅ Understood the routing hierarchy
✅ Verified the setup (blank page expected)

Key concepts:

BrowserRouter - Provides routing context to entire app
Routes - Container for route definitions
Route - Individual URL → Component mapping
Component hierarchy - Router context flows down

What's Next?

In Lesson 3, we'll define our first route and get the HomePage showing again. We'll learn about route paths, the element prop, and index routes!

L2: Setting Up the Router

What You'll Learn

Understanding BrowserRouter

How It Works

Two Approach Options

Step 1: Create the Router Component

Create the File

Build the Basic Structure

Understanding the Imports

Step 2: Update App.jsx

Current App.jsx

Update with Router

Complete Updated App.jsx

Step 3: Verify the Setup

Check Your Browser

Check for Errors

Understanding the Routing Hierarchy

File Structure Check

Alternative Routers

Common Questions

Quick Recap

What's Next?

On this page

L2: Setting Up the Router

BrowserRouter

Routes

Route

Module not found: 'react-router-dom'

Cannot find module './components/Router'

Routes is not defined

BrowserRouter (We're using this)

HashRouter

MemoryRouter

Why not put BrowserRouter in main.jsx?

Can I have multiple BrowserRouters?

What if I forget BrowserRouter?

On this page