🗺️ Lesson 6.1: React Router Basics

🌐 Understanding Single Page Applications

Before we touch a single line of React Router, let's build the right mental model. Understanding what problem routing solves makes every API in this lesson feel obvious instead of arbitrary.

What is a Single Page Application?

A Single Page Application (SPA) is a web app that loads one HTML document up front, then rewrites the page's content on the fly as you interact with it. Compare that to a traditional Multi-Page Application (MPA) — think of an old-school news site — where every click asks the server for a brand-new HTML page and the browser throws away everything and repaints from scratch.

Here's the everyday analogy: an MPA is like ordering at a restaurant where the kitchen clears your entire table and resets it for every course. An SPA is like a chef who simply swaps out the plate in front of you — same table, same tablecloth, same silverware, just new food. Faster, smoother, and nothing you were using disappears. 🍽️

Traditional Multi-Page vs Single Page Apps

Neither approach is universally "better" — they trade off different things. Here's how they stack up:

Why Do We Need React Router?

Here's a surprise for newcomers: React itself has no concept of URLs or pages. Out of the box, a React app is one component tree rendered into one <div>. Without a router, you'd end up hand-rolling something like const [page, setPage] = useState('home') and a giant if/else to decide what to show — and you'd get no working back button, no bookmarkable URLs, and no shareable links. That gets painful fast.

React Router is the community-standard library that fills this gap. It connects the browser's URL to your component tree, giving you:

• 🗺️ URL-based navigation: Different URLs display different components
• 🔗 Linkable pages: Users can bookmark and share specific views
• ⬅️ Browser history: Back and forward buttons work as expected
• 📱 Deep linking: Direct access to any part of your app
• 🎯 Code organization: Separate concerns by route/page

How React Router Works

React Router works by:

1. Listening to URL changes: React Router watches for URL changes using the browser's History API
2. Matching routes: It compares the current URL against your defined routes
3. Rendering components: When a match is found, it renders the corresponding component
4. Managing history: It keeps track of navigation so back/forward buttons work

At its heart, a router is just a lookup table from URL to component. Picture it like the receptionist directory in an office lobby — a URL walks in, the router reads the directory, and points it to exactly the right room:

📦 Installing and Setting Up React Router

Let's get React Router installed and configured in your TypeScript project.

Installation

React Router v7 is the current version (released in late 2024 and the standard throughout 2026). The good news: everything you learn here is API-compatible with v6.4+, so the concepts transfer directly to any recent project. Install it with your package manager of choice:

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

# TypeScript types ship inside the package (v6+).
# You do NOT need @types/react-router-dom anymore.

Project Structure for Routing

Before adding routes, let's organize our project structure. Here's a recommended folder layout:

src/
├── App.tsx                 # Main app component with router setup
├── main.tsx               # Entry point
├── pages/                 # Page components (route destinations)
│   ├── Home.tsx
│   ├── About.tsx
│   ├── Contact.tsx
│   ├── NotFound.tsx
│   └── ...
├── components/            # Reusable components
│   ├── Navbar.tsx
│   ├── Footer.tsx
│   └── ...
├── layouts/              # Layout components
│   └── MainLayout.tsx
└── types/                # TypeScript types
    └── index.ts

Two Ways to Set Up Routing

Modern React Router gives you two styles for defining routes, and it's worth knowing both:

• The declarative approach — wrap your app in <BrowserRouter> and describe routes with JSX <Routes>/<Route>. Simple, readable, perfect for learning and small-to-medium apps. We'll use it for most of this lesson.
• The data router — build a router object with createBrowserRouter and render a single <RouterProvider>. This is the newer, recommended style for larger apps because it unlocks data loading, actions, and better error handling (topics for later lessons). Same routing concepts underneath.

Think of them as two doors into the same house — pick whichever fits your project. Let's start with the declarative door.

Basic Router Setup (Declarative)

The foundation of the declarative approach is the <BrowserRouter> component. It must wrap your entire application so routing is available everywhere inside it.

Update your src/main.tsx (or src/index.tsx). Note the React 19 createRoot entry point:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './index.css';

createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Alternative Setup: The Data Router

Here's the same app wired up with the modern data router. Instead of nesting <Route> elements in JSX, you describe your routes as a plain array of objects and hand them to createBrowserRouter:

// src/main.tsx — data router style
import React from 'react';
import { createRoot } from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import NotFound from './pages/NotFound';

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/about', element: <About /> },
  { path: '/contact', element: <Contact /> },
  { path: '*', element: <NotFound /> },
]);

createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Alternative: HashRouter

React Router also offers HashRouter as an alternative to BrowserRouter:

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

// URLs will look like: http://example.com/#/about
<HashRouter>
  <App />
</HashRouter>

🛣️ Creating Your First Routes

Now that React Router is installed, let's create some pages and define routes for them.

Creating Page Components

First, let's create simple page components. Create these files in src/pages/:

src/pages/Home.tsx:

import React from 'react';

function Home() {
  return (
    <div>
      <h1>🏠 Welcome Home</h1>
      <p>This is the home page of our application.</p>
      <p>Navigate to other pages using the links above!</p>
    </div>
  );
}

export default Home;

src/pages/About.tsx:

import React from 'react';

function About() {
  return (
    <div>
      <h1>📖 About Us</h1>
      <p>Learn more about our company and mission.</p>
      <ul>
        <li>Founded in 2024</li>
        <li>Building amazing React applications</li>
        <li>Powered by TypeScript</li>
      </ul>
    </div>
  );
}

export default About;

src/pages/Contact.tsx:

import React from 'react';

function Contact() {
  return (
    <div>
      <h1>📧 Contact Us</h1>
      <p>Get in touch with our team!</p>
      <form>
        <div>
          <label htmlFor="name">Name:</label>
          <input type="text" id="name" name="name" />
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input type="email" id="email" name="email" />
        </div>
        <div>
          <label htmlFor="message">Message:</label>
          <textarea id="message" name="message" rows={4}></textarea>
        </div>
        <button type="submit">Send Message</button>
      </form>
    </div>
  );
}

export default Contact;

src/pages/NotFound.tsx:

import React from 'react';
import { Link } from 'react-router-dom';

function NotFound() {
  return (
    <div style={{ textAlign: 'center', padding: '3rem' }}>
      <h1>404 - Page Not Found</h1>
      <p>The page you're looking for doesn't exist.</p>
      <Link to="/">← Go back home</Link>
    </div>
  );
}

export default NotFound;

Defining Routes with Routes and Route

Now let's wire up these pages to URLs. Update your src/App.tsx:

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

function App() {
  return (
    <div className="app">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

export default App;

How Route Matching Works

When the URL changes, React Router looks at all your <Route> definitions, scores each one for how well it matches, and renders the single best match. For a simple app you can picture it walking the list until something fits:

Testing Your Routes

Start your development server and test the routes:

npm run dev
# or
yarn dev

Try navigating to these URLs manually in your browser:

• http://localhost:5173/ → Should show Home page
• http://localhost:5173/about → Should show About page
• http://localhost:5173/contact → Should show Contact page
• http://localhost:5173/doesnotexist → Should show 404 page

🔗 Navigation with Link and NavLink

Manually typing URLs in the browser isn't a great user experience. Let's add proper navigation links that work without full page reloads.

The Problem with Regular Anchor Tags

You might be tempted to use regular HTML <a> tags for navigation:

// ❌ DON'T DO THIS
function Navbar() {
  return (
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  );
}

The problem: Regular <a> tags cause full page reloads, defeating the purpose of a Single Page Application. Your React app will restart from scratch on every navigation!

Using the Link Component

React Router provides the Link component for client-side navigation:

import React from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

export default Navbar;

Link Props and Options

The Link component accepts several useful props:

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

function NavigationExample() {
  return (
    <div>
      {/* Basic link */}
      <Link to="/about">About Us</Link>
      
      {/* Link with relative path */}
      <Link to="../parent">Go to Parent</Link>
      
      {/* Link with state (pass data to next page) */}
      <Link 
        to="/profile" 
        state={{ from: 'homepage', userId: 123 }}
      >
        View Profile
      </Link>
      
      {/* Link that replaces history entry */}
      <Link to="/login" replace>
        Login
      </Link>
      
      {/* Link with additional props */}
      <Link 
        to="/docs"
        className="nav-link"
        target="_blank"
        rel="noopener noreferrer"
      >
        Documentation
      </Link>
    </div>
  );
}

Introducing NavLink

NavLink is a special version of Link that adds styling to the active link. This is perfect for navigation menus where you want to highlight the current page.

import React from 'react';
import { NavLink } from 'react-router-dom';
import './Navbar.css';

function Navbar() {
  return (
    <nav className="navbar">
      <NavLink 
        to="/"
        className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
      >
        Home
      </NavLink>
      
      <NavLink 
        to="/about"
        className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
      >
        About
      </NavLink>
      
      <NavLink 
        to="/contact"
        className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
      >
        Contact
      </NavLink>
    </nav>
  );
}

export default Navbar;

And the corresponding CSS (Navbar.css):

.navbar {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #667eea;
}

.nav-link {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-link.active {
  background-color: rgba(255, 255, 255, 0.2);
  font-weight: bold;
}

NavLink Style Options

You can style NavLink in multiple ways:

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

function Navbar() {
  return (
    <nav>
      {/* Option 1: className function */}
      <NavLink
        to="/"
        className={({ isActive }) => isActive ? 'active' : ''}
      >
        Home
      </NavLink>
      
      {/* Option 2: style function */}
      <NavLink
        to="/about"
        style={({ isActive }) => ({
          color: isActive ? '#667eea' : '#333',
          fontWeight: isActive ? 'bold' : 'normal'
        })}
      >
        About
      </NavLink>
      
      {/* Option 3: children function (advanced) */}
      <NavLink to="/contact">
        {({ isActive }) => (
          <span>
            {isActive && '➜ '}
            Contact
          </span>
        )}
      </NavLink>
    </nav>
  );
}

Complete Navbar Example

Let's create a full-featured navbar component. Create src/components/Navbar.tsx:

import React from 'react';
import { NavLink } from 'react-router-dom';
import './Navbar.css';

function Navbar() {
  // Helper function to determine active class
  const getNavLinkClass = ({ isActive }: { isActive: boolean }) => {
    return isActive ? 'nav-link nav-link-active' : 'nav-link';
  };
  
  return (
    <nav className="navbar">
      <div className="navbar-brand">
        <NavLink to="/" className="brand-link">
          🚀 My App
        </NavLink>
      </div>
      
      <div className="navbar-links">
        <NavLink to="/" end className={getNavLinkClass}>
          Home
        </NavLink>
        <NavLink to="/about" className={getNavLinkClass}>
          About
        </NavLink>
        <NavLink to="/contact" className={getNavLinkClass}>
          Contact
        </NavLink>
      </div>
    </nav>
  );
}

export default Navbar;

Integrating Navbar into App

Now let's add the navbar to our application. Update src/App.tsx:

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import NotFound from './pages/NotFound';
import './App.css';

function App() {
  return (
    <div className="app">
      <Navbar />
      
      <main className="main-content">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </main>
    </div>
  );
}

export default App;

Add some basic styling in src/App.css:

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

// src/components/Footer.tsx
import React from 'react';
import { Link } from 'react-router-dom';
import './Footer.css';

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-content">
        <p>© 2024 My App. All rights reserved.</p>
        <div className="footer-links">
          <Link to="/privacy">Privacy Policy</Link>
          <Link to="/terms">Terms of Service</Link>
        </div>
      </div>
    </footer>
  );
}

export default Footer;

// In App.tsx, add after main:
// <Footer />

📝 Typing Routes with TypeScript

One of the benefits of using React Router with TypeScript is type safety. Let's explore how to properly type your routing code.

Typing Route Parameters

When you have dynamic routes (which we'll cover more in the next lesson), you'll want to type the parameters. Here's a preview:

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

function UserProfile() {
  // Parameterize useParams with the exact keys you expect
  const { userId } = useParams<{ userId: string }>();

  // TypeScript now knows userId is string | undefined
  if (!userId) {
    return <div>User ID is required</div>;
  }

  return <div>User Profile: {userId}</div>;
}

export default UserProfile;

Programmatic Navigation with useNavigate

Links are for things the user clicks. But sometimes your code needs to move the user — after a form submits, once login succeeds, or when a timer runs out. That's the job of the useNavigate hook, which hands you a fully-typed navigate function:

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

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

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    await logIn();
    // Push a new entry onto history and go to the dashboard
    navigate('/dashboard');

    // Other handy options:
    // navigate('/login', { replace: true });        // replace instead of push
    // navigate(-1);                                  // go back one step
    // navigate('/profile', { state: { from: 'login' } }); // pass state
  };

  return <form onSubmit={handleSubmit}>{/* fields... */}</form>;
}

Creating a Routes Configuration

For larger applications, it's helpful to centralize your route definitions with proper types:

// src/types/routes.ts

export const ROUTES = {
  HOME: '/',
  ABOUT: '/about',
  CONTACT: '/contact',
  PROFILE: '/profile/:userId',
  BLOG: '/blog',
  BLOG_POST: '/blog/:postId',
  NOT_FOUND: '*'
} as const;

// Type for route keys
export type RouteKey = keyof typeof ROUTES;

// Type for route values
export type RoutePath = typeof ROUTES[RouteKey];

Now use these constants throughout your app:

// In App.tsx
import { Routes, Route } from 'react-router-dom';
import { ROUTES } from './types/routes';
import Home from './pages/Home';
import About from './pages/About';
// ... other imports

function App() {
  return (
    <Routes>
      <Route path={ROUTES.HOME} element={<Home />} />
      <Route path={ROUTES.ABOUT} element={<About />} />
      <Route path={ROUTES.CONTACT} element={<Contact />} />
      <Route path={ROUTES.NOT_FOUND} element={<NotFound />} />
    </Routes>
  );
}

// In components
import { Link } from 'react-router-dom';
import { ROUTES } from '../types/routes';

function Navbar() {
  return (
    <nav>
      <Link to={ROUTES.HOME}>Home</Link>
      <Link to={ROUTES.ABOUT}>About</Link>
    </nav>
  );
}

Typing Link and NavLink Props

For reusable navigation components, you can type the props:

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

// Extend LinkProps for custom behavior
interface CustomLinkProps extends LinkProps {
  icon?: string;
  badge?: number;
}

function CustomLink({ icon, badge, children, ...linkProps }: CustomLinkProps) {
  return (
    <Link {...linkProps} className="custom-link">
      {icon && <span className="icon">{icon}</span>}
      {children}
      {badge && badge > 0 && (
        <span className="badge">{badge}</span>
      )}
    </Link>
  );
}

// Usage
<CustomLink to="/messages" icon="📧" badge={5}>
  Messages
</CustomLink>

Typing Router State

When passing state through navigation, type it properly:

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

// Define state shape
interface LocationState {
  from: string;
  userId?: number;
}

// Passing state
function HomePage() {
  return (
    <Link 
      to="/profile"
      state={{ from: 'home', userId: 123 } as LocationState}
    >
      View Profile
    </Link>
  );
}

// Receiving state
function ProfilePage() {
  const location = useLocation();
  const state = location.state as LocationState | null;
  
  return (
    <div>
      <h1>Profile</h1>
      {state && (
        <p>You came from: {state.from}</p>
      )}
    </div>
  );
}

Creating Type-Safe Route Builders

For dynamic routes, create helper functions:

// src/utils/routes.ts

export const buildUserProfileRoute = (userId: string | number): string => {
  return `/profile/${userId}`;
};

export const buildBlogPostRoute = (postId: string | number): string => {
  return `/blog/${postId}`;
};

// Usage
import { Link } from 'react-router-dom';
import { buildUserProfileRoute } from '../utils/routes';

function UserList({ users }: { users: User[] }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          <Link to={buildUserProfileRoute(user.id)}>
            {user.name}
          </Link>
        </li>
      ))}
    </ul>
  );
}

// src/config/routes.ts

export const ROUTES = {
  HOME: '/',
  ABOUT: '/about',
  CONTACT: '/contact',
  BLOG: '/blog',
  BLOG_POST: '/blog/:postId',
  USER_PROFILE: '/user/:userId',
  SETTINGS: '/settings',
  NOT_FOUND: '*'
} as const;

export const buildBlogPostRoute = (postId: string | number) => 
  `/blog/${postId}`;

export const buildUserProfileRoute = (userId: string | number) => 
  `/user/${userId}`;

export type RouteKey = keyof typeof ROUTES;

🏗️ Building a Multi-Page Application

Let's put everything together and build a complete multi-page application with proper routing, navigation, and TypeScript types.

Project Structure

Here's the complete structure we'll build:

src/
├── App.tsx
├── main.tsx
├── config/
│   └── routes.ts           # Route constants
├── components/
│   ├── Navbar.tsx          # Navigation component
│   ├── Navbar.css
│   ├── Footer.tsx          # Footer component
│   └── Footer.css
├── pages/
│   ├── Home.tsx
│   ├── About.tsx
│   ├── Contact.tsx
│   ├── Services.tsx        # New page
│   ├── Blog.tsx            # New page
│   └── NotFound.tsx
└── types/
    └── index.ts            # Shared types

Step 1: Define Routes Configuration

Create src/config/routes.ts:

export const ROUTES = {
  HOME: '/',
  ABOUT: '/about',
  SERVICES: '/services',
  BLOG: '/blog',
  CONTACT: '/contact',
  NOT_FOUND: '*'
} as const;

export type RouteKey = keyof typeof ROUTES;
export type RoutePath = typeof ROUTES[RouteKey];

Step 2: Create Additional Pages

src/pages/Services.tsx:

import React from 'react';

function Services() {
  const services = [
    { id: 1, name: 'Web Development', icon: '💻', description: 'Custom websites and web applications' },
    { id: 2, name: 'Mobile Apps', icon: '📱', description: 'iOS and Android development' },
    { id: 3, name: 'UI/UX Design', icon: '🎨', description: 'Beautiful and intuitive interfaces' },
    { id: 4, name: 'Consulting', icon: '💼', description: 'Technical consulting services' }
  ];

  return (
    <div>
      <h1>🛠️ Our Services</h1>
      <p>We offer a wide range of professional services to help your business grow.</p>
      
      <div className="services-grid">
        {services.map(service => (
          <div key={service.id} className="service-card">
            <div className="service-icon">{service.icon}</div>
            <h3>{service.name}</h3>
            <p>{service.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Services;

src/pages/Blog.tsx:

import React from 'react';
import { Link } from 'react-router-dom';

interface BlogPost {
  id: number;
  title: string;
  excerpt: string;
  date: string;
  author: string;
}

function Blog() {
  const posts: BlogPost[] = [
    {
      id: 1,
      title: 'Getting Started with React Router',
      excerpt: 'Learn the basics of routing in React applications...',
      date: '2024-01-15',
      author: 'Jane Doe'
    },
    {
      id: 2,
      title: 'TypeScript Best Practices',
      excerpt: 'Improve your TypeScript code with these tips...',
      date: '2024-01-10',
      author: 'John Smith'
    },
    {
      id: 3,
      title: 'Building SPAs with React',
      excerpt: 'A comprehensive guide to single-page applications...',
      date: '2024-01-05',
      author: 'Jane Doe'
    }
  ];

  return (
    <div>
      <h1>📝 Blog</h1>
      <p>Stay updated with our latest articles and tutorials.</p>
      
      <div className="blog-posts">
        {posts.map(post => (
          <article key={post.id} className="blog-post-card">
            <h2>{post.title}</h2>
            <div className="post-meta">
              <span>By {post.author}</span>
              <span>{new Date(post.date).toLocaleDateString()}</span>
            </div>
            <p>{post.excerpt}</p>
            <Link to={`/blog/${post.id}`}>Read more →</Link>
          </article>
        ))}
      </div>
    </div>
  );
}

export default Blog;

Step 3: Enhanced Navbar

Update src/components/Navbar.tsx with all routes:

import React from 'react';
import { NavLink } from 'react-router-dom';
import { ROUTES } from '../config/routes';
import './Navbar.css';

function Navbar() {
  const navLinks = [
    { to: ROUTES.HOME, label: 'Home', end: true },
    { to: ROUTES.ABOUT, label: 'About' },
    { to: ROUTES.SERVICES, label: 'Services' },
    { to: ROUTES.BLOG, label: 'Blog' },
    { to: ROUTES.CONTACT, label: 'Contact' }
  ];

  return (
    <nav className="navbar">
      <div className="navbar-container">
        <NavLink to={ROUTES.HOME} className="navbar-brand">
          🚀 My App
        </NavLink>
        
        <div className="navbar-links">
          {navLinks.map(link => (
            <NavLink
              key={link.to}
              to={link.to}
              end={link.end}
              className={({ isActive }) => 
                isActive ? 'nav-link nav-link-active' : 'nav-link'
              }
            >
              {link.label}
            </NavLink>
          ))}
        </div>
      </div>
    </nav>
  );
}

export default Navbar;

Step 4: Complete App Component

Update src/App.tsx with all routes:

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import { ROUTES } from './config/routes';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Home from './pages/Home';
import About from './pages/About';
import Services from './pages/Services';
import Blog from './pages/Blog';
import Contact from './pages/Contact';
import NotFound from './pages/NotFound';
import './App.css';

function App() {
  return (
    <div className="app">
      <Navbar />
      
      <main className="main-content">
        <Routes>
          <Route path={ROUTES.HOME} element={<Home />} />
          <Route path={ROUTES.ABOUT} element={<About />} />
          <Route path={ROUTES.SERVICES} element={<Services />} />
          <Route path={ROUTES.BLOG} element={<Blog />} />
          <Route path={ROUTES.CONTACT} element={<Contact />} />
          <Route path={ROUTES.NOT_FOUND} element={<NotFound />} />
        </Routes>
      </main>
      
      <Footer />
    </div>
  );
}

export default App;

Step 5: Styling

Add comprehensive styling in src/App.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: #333;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.service-card {
  padding: 2rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.service-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* Blog Posts */
.blog-posts {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

.blog-post-card {
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.blog-post-card h2 {
  margin-bottom: 0.5rem;
  color: #667eea;
}

.post-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 1rem;
}

.blog-post-card a {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
}

.blog-post-card a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .main-content {
    padding: 1rem;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
  }
}

Play With Route Matching

Given the routes we just defined, which component renders for a given URL? Click a URL below to see what React Router would match. Notice how anything that doesn't match a real route falls through to the wildcard 404.

// 1. Update routes.ts
export const ROUTES = {
  // ... existing routes
  PRODUCTS: '/products',
  // ...
};

// 2. Create Products.tsx
const products = [
  { id: 1, name: 'Product 1', price: 29.99, image: '🎁' },
  // ... more products
];

// 3. Add to Navbar.tsx navLinks array
{ to: ROUTES.PRODUCTS, label: 'Products' }

// 4. Add to App.tsx Routes
<Route path={ROUTES.PRODUCTS} element={<Products />} />

✨ Best Practices and Common Patterns

Let's explore some best practices and common patterns when working with React Router to build maintainable and scalable applications.

1. Organize Routes by Feature

As your application grows, organize routes by feature rather than keeping everything in one file:

src/
├── features/
│   ├── auth/
│   │   ├── routes.tsx        # Auth-related routes
│   │   ├── Login.tsx
│   │   └── Register.tsx
│   ├── blog/
│   │   ├── routes.tsx        # Blog-related routes
│   │   ├── BlogList.tsx
│   │   └── BlogPost.tsx
│   └── dashboard/
│       ├── routes.tsx        # Dashboard routes
│       └── Dashboard.tsx
└── App.tsx                   # Main app with route imports

Example feature routes file (features/blog/routes.tsx):

import { Route } from 'react-router-dom';
import BlogList from './BlogList';
import BlogPost from './BlogPost';

export const blogRoutes = (
  <>
    <Route path="/blog" element={<BlogList />} />
    <Route path="/blog/:postId" element={<BlogPost />} />
  </>
);

// In App.tsx
import { Routes } from 'react-router-dom';
import { blogRoutes } from './features/blog/routes';
import { authRoutes } from './features/auth/routes';

function App() {
  return (
    <Routes>
      {blogRoutes}
      {authRoutes}
      {/* ... other routes */}
    </Routes>
  );
}

2. Nested Routes and Shared Layouts with <Outlet>

Here's a pattern you'll use constantly: a group of pages that share the same chrome — a dashboard with a sidebar, say, where only the middle panel changes. Instead of repeating that sidebar in every page, you nest child routes inside a layout route and mark the swap-in spot with <Outlet />.

Think of <Outlet> as a picture frame. The layout is the frame (and the wall around it); the matched child route is the photo you slot in. Change routes, swap the photo — the frame stays put.

import { Routes, Route, Outlet, NavLink } from 'react-router-dom';
import Overview from './Overview';
import Settings from './Settings';
import Billing from './Billing';

// A layout component renders shared UI + an Outlet for the active child
function DashboardLayout() {
  return (
    <div className="dashboard">
      <aside>
        <NavLink to="/dashboard" end>Overview</NavLink>
        <NavLink to="/dashboard/settings">Settings</NavLink>
        <NavLink to="/dashboard/billing">Billing</NavLink>
      </aside>
      <main>
        {/* The matched child route renders right here */}
        <Outlet />
      </main>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<DashboardLayout />}>
        {/* Index route: shown at exactly /dashboard */}
        <Route index element={<Overview />} />
        {/* Child routes: shown at /dashboard/settings, /dashboard/billing */}
        <Route path="settings" element={<Settings />} />
        <Route path="billing" element={<Billing />} />
      </Route>
    </Routes>
  );
}

3. Create a Custom 404 Component

Make your 404 page helpful and on-brand:

import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import './NotFound.css';

function NotFound() {
  const location = useLocation();
  
  return (
    <div className="not-found-container">
      <div className="not-found-content">
        <h1 className="not-found-title">404</h1>
        <h2>Page Not Found</h2>
        <p>
          The page <code>{location.pathname}</code> doesn't exist.
        </p>
        
        <div className="not-found-actions">
          <Link to="/" className="button button-primary">
            Go to Homepage
          </Link>
          <button 
            onClick={() => window.history.back()}
            className="button button-secondary"
          >
            Go Back
          </button>
        </div>
        
        <div className="helpful-links">
          <h3>Popular Pages:</h3>
          <ul>
            <li><Link to="/about">About Us</Link></li>
            <li><Link to="/contact">Contact</Link></li>
            <li><Link to="/blog">Blog</Link></li>
          </ul>
        </div>
      </div>
    </div>
  );
}

export default NotFound;

4. Loading States for Route Transitions

Show feedback during route changes (especially important with lazy loading):

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

// Lazy load components
const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));

function LoadingSpinner() {
  return (
    <div className="loading-container">
      <div className="spinner"></div>
      <p>Loading...</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

5. Scroll to Top on Route Change

By default, React Router doesn't scroll to the top when navigating. Create a component to handle this:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function ScrollToTop() {
  const { pathname } = useLocation();
  
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
  
  return null;
}

// In App.tsx
function App() {
  return (
    <div className="app">
      <ScrollToTop />
      <Navbar />
      <Routes>
        {/* ... routes */}
      </Routes>
    </div>
  );
}

6. Use URL Parameters for Shareable State

Put important state in the URL so users can bookmark and share specific views:

// ✅ GOOD: State in URL
// URL: /products?category=electronics&sort=price&page=2

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

function Products() {
  const [searchParams, setSearchParams] = useSearchParams();
  
  const category = searchParams.get('category') || 'all';
  const sort = searchParams.get('sort') || 'name';
  const page = searchParams.get('page') || '1';
  
  const handleCategoryChange = (newCategory: string) => {
    setSearchParams({ category: newCategory, sort, page });
  };
  
  // Users can bookmark this URL and return to exact state!
  return (
    <div>
      <select value={category} onChange={e => handleCategoryChange(e.target.value)}>
        <option value="all">All</option>
        <option value="electronics">Electronics</option>
      </select>
      {/* ... */}
    </div>
  );
}

// ❌ BAD: State only in React
// URL: /products (no context)

import { useState } from 'react';

function Products() {
  const [category, setCategory] = useState('all');
  
  // State is lost on refresh!
  // Can't share this view with others!
}

7. Breadcrumb Navigation

Create breadcrumbs to help users understand their location:

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

function Breadcrumbs() {
  const location = useLocation();
  
  const pathnames = location.pathname.split('/').filter(x => x);
  
  return (
    <nav className="breadcrumbs">
      <Link to="/">Home</Link>
      {pathnames.map((name, index) => {
        const routeTo = `/${pathnames.slice(0, index + 1).join('/')}`;
        const isLast = index === pathnames.length - 1;
        
        return isLast ? (
          <span key={routeTo}> / {name}</span>
        ) : (
          <span key={routeTo}>
            {' / '}
            <Link to={routeTo}>{name}</Link>
          </span>
        );
      })}
    </nav>
  );
}

// Usage: Renders "Home / blog / post-title" for /blog/post-title

8. Route Configuration Array Pattern

For complex routing, use a configuration array:

import { RouteObject, useRoutes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

const routes: RouteObject[] = [
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />,
  },
  {
    path: '/contact',
    element: <Contact />,
  },
  {
    path: '*',
    element: <NotFound />,
  }
];

function App() {
  const element = useRoutes(routes);
  return (
    <div className="app">
      <Navbar />
      {element}
    </div>
  );
}

Common Pitfalls to Avoid

🎯 Summary and Next Steps

Congratulations! You've learned the fundamentals of React Router and built your first multi-page application.

What You've Learned

Complete Example: Everything Together

Here's a complete, production-ready routing setup:

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// src/config/routes.ts
export const ROUTES = {
  HOME: '/',
  ABOUT: '/about',
  SERVICES: '/services',
  BLOG: '/blog',
  CONTACT: '/contact',
  NOT_FOUND: '*'
} as const;

// src/App.tsx
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import { ROUTES } from './config/routes';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import ScrollToTop from './components/ScrollToTop';
import Home from './pages/Home';
import About from './pages/About';
import Services from './pages/Services';
import Blog from './pages/Blog';
import Contact from './pages/Contact';
import NotFound from './pages/NotFound';

function App() {
  return (
    <div className="app">
      <ScrollToTop />
      <Navbar />
      <main className="main-content">
        <Routes>
          <Route path={ROUTES.HOME} element={<Home />} />
          <Route path={ROUTES.ABOUT} element={<About />} />
          <Route path={ROUTES.SERVICES} element={<Services />} />
          <Route path={ROUTES.BLOG} element={<Blog />} />
          <Route path={ROUTES.CONTACT} element={<Contact />} />
          <Route path={ROUTES.NOT_FOUND} element={<NotFound />} />
        </Routes>
      </main>
      <Footer />
    </div>
  );
}

export default App;

Quick Reference: React Router Essentials

What's Next?

In the upcoming lessons, you'll learn:

Practice Projects

To reinforce your learning, try building:

1. Portfolio Website: Multi-page portfolio with About, Projects, Contact pages
2. Documentation Site: Navigation between different doc sections
3. Restaurant Menu: Different pages for menu categories
4. Product Catalog: Browse different product categories

Additional Resources

• 📚 React Router v7 Official Docs
• 📚 React Router GitHub
• 📖 Upgrading from v6 → v7
• ⚛️ React 19 Documentation