🗺️ Lesson 6.1: React Router Basics

🌐 Understanding Single Page Applications

Before diving into React Router, let's understand what Single Page Applications (SPAs) are and why routing is essential for modern web applications.

What is a Single Page Application?

A Single Page Application (SPA) is a web application that loads a single HTML page and dynamically updates content as users interact with the app. Unlike traditional multi-page applications that reload the entire page for each navigation, SPAs update only the parts of the page that change.

Traditional Multi-Page vs Single Page Apps

Why Do We Need React Router?

React, by itself, doesn't have built-in routing capabilities. When you create a React app without routing, you're limited to a single view or must manually manage which components to show. React Router solves this by providing:

• 🗺️ 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

📦 Installing and Setting Up React Router

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

Installation

React Router v6 is the current version. Install it using npm or yarn:

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

# TypeScript types are included automatically in v6+
# No need for @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

Basic Router Setup

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

Update your src/main.tsx (or src/index.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>
);

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

React Router matches routes from top to bottom and renders the first match it finds:

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';

// Define the shape of your route params
interface UserParams {
  userId: string;
}

function UserProfile() {
  // Type the params with your interface
  const { userId } = useParams<UserParams>();
  
  // 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;

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;
  }
}

// 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. Use Index Routes for Default Content

When you have nested routes, use index routes to specify default content:

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

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<Dashboard />}>
        {/* Index route - shown at /dashboard */}
        <Route index element={<Overview />} />
        {/* Child routes */}
        <Route path="settings" element={<Settings />} />
      </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 Official Docs
• 📚 React Router GitHub
• 🎥 React Training YouTube
• 💬 Remix/React Router Discord