Back to Course|4 hours|Intermediate

React Router

Learn React Router for navigation, routing, and building single-page applications. Master client-side routing in React.

Progress: 0/4 topics completed0%

Select Topics Overview

React Router Basics

Learn the fundamentals of React Router for navigation in React applications

Content by: Chirag Gupta

MERN Stack Developer

Connect

What is React Router?

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

Key Features

•Declarative routing for React applications
•Nested routing support
•Dynamic routing with parameters
•Programmatic navigation
•Browser history management

Basic Setup

Code Example

// Install React Router
npm install react-router-dom

// Basic Router Setup
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/contact" element={<Contact />} />
            </Routes>
        </BrowserRouter>
    );
}

// Navigation Component
import { Link } from 'react-router-dom';

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

// Complete Example with Components
function Home() {
    return (
        <div>
            <h1>Welcome to Our App</h1>
            <p>This is the home page of our React application.</p>
        </div>
    );
}

function About() {
    return (
        <div>
            <h1>About Us</h1>
            <p>Learn more about our company and mission.</p>
        </div>
    );
}

function Contact() {
    return (
        <div>
            <h1>Contact Us</h1>
            <p>Get in touch with our team.</p>
        </div>
    );
}

// Enhanced Navigation with Active States
function EnhancedNavigation() {
    const location = useLocation();
    
    return (
        <nav className="navigation">
            <Link 
                to="/" 
                className={location.pathname === '/' ? 'active' : ''}
            >
                Home
            </Link>
            <Link 
                to="/about" 
                className={location.pathname === '/about' ? 'active' : ''}
            >
                About
            </Link>
            <Link 
                to="/contact" 
                className={location.pathname === '/contact' ? 'active' : ''}
            >
                Contact
            </Link>
        </nav>
    );
}

Swipe to see more code

// Install React Router
npm install react-router-dom

// Basic Router Setup
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/contact" element={<Contact />} />
            </Routes>
        </BrowserRouter>
    );
}

// Navigation Component
import { Link } from 'react-router-dom';

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

// Complete Example with Components
function Home() {
    return (
        <div>
            <h1>Welcome to Our App</h1>
            <p>This is the home page of our React application.</p>
        </div>
    );
}

function About() {
    return (
        <div>
            <h1>About Us</h1>
            <p>Learn more about our company and mission.</p>
        </div>
    );
}

function Contact() {
    return (
        <div>
            <h1>Contact Us</h1>
            <p>Get in touch with our team.</p>
        </div>
    );
}

// Enhanced Navigation with Active States
function EnhancedNavigation() {
    const location = useLocation();
    
    return (
        <nav className="navigation">
            <Link 
                to="/" 
                className={location.pathname === '/' ? 'active' : ''}
            >
                Home
            </Link>
            <Link 
                to="/about" 
                className={location.pathname === '/about' ? 'active' : ''}
            >
                About
            </Link>
            <Link 
                to="/contact" 
                className={location.pathname === '/contact' ? 'active' : ''}
            >
                Contact
            </Link>
        </nav>
    );
}

Scroll

Practice Exercise: Basic Router Setup

Code Example

// Exercise: Build a Multi-Page Blog Application
// Create a blog application with React Router

// src/App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './pages/Home';
import BlogList from './pages/BlogList';
import BlogPost from './pages/BlogPost';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
    return (
        <BrowserRouter>
            <div className="app">
                <Navigation />
                <main className="main-content">
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/blog" element={<BlogList />} />
                        <Route path="/blog/:id" element={<BlogPost />} />
                        <Route path="/about" element={<About />} />
                        <Route path="/contact" element={<Contact />} />
                    </Routes>
                </main>
            </div>
        </BrowserRouter>
    );
}

// src/components/Navigation.js
import { Link, useLocation } from 'react-router-dom';

function Navigation() {
    const location = useLocation();
    
    return (
        <nav className="navbar">
            <div className="nav-brand">
                <Link to="/">MyBlog</Link>
            </div>
            <ul className="nav-links">
                <li>
                    <Link 
                        to="/" 
                        className={location.pathname === '/' ? 'active' : ''}
                    >
                        Home
                    </Link>
                </li>
                <li>
                    <Link 
                        to="/blog" 
                        className={location.pathname.startsWith('/blog') ? 'active' : ''}
                    >
                        Blog
                    </Link>
                </li>
                <li>
                    <Link 
                        to="/about" 
                        className={location.pathname === '/about' ? 'active' : ''}
                    >
                        About
                    </Link>
                </li>
                <li>
                    <Link 
                        to="/contact" 
                        className={location.pathname === '/contact' ? 'active' : ''}
                    >
                        Contact
                    </Link>
                </li>
            </ul>
        </nav>
    );
}

// src/pages/Home.js
function Home() {
    return (
        <div className="home">
            <h1>Welcome to MyBlog</h1>
            <p>Discover amazing stories and insights.</p>
            <Link to="/blog" className="cta-button">
                Read Our Blog
            </Link>
        </div>
    );
}

// src/pages/BlogList.js
function BlogList() {
    const posts = [
        { id: 1, title: 'Getting Started with React', excerpt: 'Learn the basics...' },
        { id: 2, title: 'Advanced React Patterns', excerpt: 'Master complex patterns...' },
        { id: 3, title: 'React Performance Tips', excerpt: 'Optimize your apps...' }
    ];
    
    return (
        <div className="blog-list">
            <h1>Blog Posts</h1>
            <div className="posts-grid">
                {posts.map(post => (
                    <article key={post.id} className="post-card">
                        <h2>{post.title}</h2>
                        <p>{post.excerpt}</p>
                        <Link to={`/blog/${post.id}`} className="read-more">
                            Read More
                        </Link>
                    </article>
                ))}
            </div>
        </div>
    );
}

// src/pages/BlogPost.js
import { useParams, useNavigate } from 'react-router-dom';

function BlogPost() {
    const { id } = useParams();
    const navigate = useNavigate();
    
    // Simulate fetching post data
    const post = {
        id: id,
        title: `Blog Post ${id}`,
        content: 'This is the full content of the blog post...',
        author: 'John Doe',
        date: '2025-01-15'
    };
    
    return (
        <article className="blog-post">
            <button onClick={() => navigate('/blog')} className="back-button">
                ← Back to Blog
            </button>
            <h1>{post.title}</h1>
            <div className="post-meta">
                <span>By {post.author}</span>
                <span>{post.date}</span>
            </div>
            <div className="post-content">
                {post.content}
            </div>
        </article>
    );
}

// Challenge: Add a search functionality to the blog
// Challenge: Add pagination to the blog list
// Challenge: Add categories and filtering

Swipe to see more code

// Exercise: Build a Multi-Page Blog Application
// Create a blog application with React Router

// src/App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './pages/Home';
import BlogList from './pages/BlogList';
import BlogPost from './pages/BlogPost';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
    return (
        <BrowserRouter>
            <div className="app">
                <Navigation />
                <main className="main-content">
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/blog" element={<BlogList />} />
                        <Route path="/blog/:id" element={<BlogPost />} />
                        <Route path="/about" element={<About />} />
                        <Route path="/contact" element={<Contact />} />
                    </Routes>
                </main>
            </div>
        </BrowserRouter>
    );
}

// src/components/Navigation.js
import { Link, useLocation } from 'react-router-dom';

function Navigation() {
    const location = useLocation();
    
    return (
        <nav className="navbar">
            <div className="nav-brand">
                <Link to="/">MyBlog</Link>
            </div>
            <ul className="nav-links">
                <li>
                    <Link 
                        to="/" 
                        className={location.pathname === '/' ? 'active' : ''}
                    >
                        Home
                    </Link>
                </li>
                <li>
                    <Link 
                        to="/blog" 
                        className={location.pathname.startsWith('/blog') ? 'active' : ''}
                    >
                        Blog
                    </Link>
                </li>
                <li>
                    <Link 
                        to="/about" 
                        className={location.pathname === '/about' ? 'active' : ''}
                    >
                        About
                    </Link>
                </li>
                <li>
                    <Link 
                        to="/contact" 
                        className={location.pathname === '/contact' ? 'active' : ''}
                    >
                        Contact
                    </Link>
                </li>
            </ul>
        </nav>
    );
}

// src/pages/Home.js
function Home() {
    return (
        <div className="home">
            <h1>Welcome to MyBlog</h1>
            <p>Discover amazing stories and insights.</p>
            <Link to="/blog" className="cta-button">
                Read Our Blog
            </Link>
        </div>
    );
}

// src/pages/BlogList.js
function BlogList() {
    const posts = [
        { id: 1, title: 'Getting Started with React', excerpt: 'Learn the basics...' },
        { id: 2, title: 'Advanced React Patterns', excerpt: 'Master complex patterns...' },
        { id: 3, title: 'React Performance Tips', excerpt: 'Optimize your apps...' }
    ];
    
    return (
        <div className="blog-list">
            <h1>Blog Posts</h1>
            <div className="posts-grid">
                {posts.map(post => (
                    <article key={post.id} className="post-card">
                        <h2>{post.title}</h2>
                        <p>{post.excerpt}</p>
                        <Link to={`/blog/${post.id}`} className="read-more">
                            Read More
                        </Link>
                    </article>
                ))}
            </div>
        </div>
    );
}

// src/pages/BlogPost.js
import { useParams, useNavigate } from 'react-router-dom';

function BlogPost() {
    const { id } = useParams();
    const navigate = useNavigate();
    
    // Simulate fetching post data
    const post = {
        id: id,
        title: `Blog Post ${id}`,
        content: 'This is the full content of the blog post...',
        author: 'John Doe',
        date: '2025-01-15'
    };
    
    return (
        <article className="blog-post">
            <button onClick={() => navigate('/blog')} className="back-button">
                ← Back to Blog
            </button>
            <h1>{post.title}</h1>
            <div className="post-meta">
                <span>By {post.author}</span>
                <span>{post.date}</span>
            </div>
            <div className="post-content">
                {post.content}
            </div>
        </article>
    );
}

// Challenge: Add a search functionality to the blog
// Challenge: Add pagination to the blog list
// Challenge: Add categories and filtering

Scroll

🎯 Practice Exercise

Test your understanding of this topic:

I understand the basic concepts covered in this topicI can apply the concepts in practical scenariosI'm ready to move to the next topic

Route Parameters

Learn to handle dynamic routes and URL parameters in React Router

Content by: Harmi Savani

MERN Stack Developer

Connect

URL Parameters

URL parameters allow you to create dynamic routes that can accept different values. They are defined in the route path using a colon followed by the parameter name.

Basic URL Parameters

Code Example

// Route with parameter
<Route path="/user/:id" element={<UserProfile />} />

// Component using useParams
import { useParams } from 'react-router-dom';

function UserProfile() {
    const { id } = useParams();
    
    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
}

// Multiple parameters
<Route path="/user/:id/posts/:postId" element={<UserPost />} />

function UserPost() {
    const { id, postId } = useParams();
    
    return (
        <div>
            <h1>User Post</h1>
            <p>User ID: {id}</p>
            <p>Post ID: {postId}</p>
        </div>
    );
}

Swipe to see more code

// Route with parameter
<Route path="/user/:id" element={<UserProfile />} />

// Component using useParams
import { useParams } from 'react-router-dom';

function UserProfile() {
    const { id } = useParams();
    
    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
}

// Multiple parameters
<Route path="/user/:id/posts/:postId" element={<UserPost />} />

function UserPost() {
    const { id, postId } = useParams();
    
    return (
        <div>
            <h1>User Post</h1>
            <p>User ID: {id}</p>
            <p>Post ID: {postId}</p>
        </div>
    );
}

Scroll

Query Parameters

Code Example

// Using query parameters
import { useSearchParams } from 'react-router-dom';

function ProductList() {
    const [searchParams, setSearchParams] = useSearchParams();
    const category = searchParams.get('category');
    const sort = searchParams.get('sort');
    
    return (
        <div>
            <h1>Products</h1>
            <p>Category: {category}</p>
            <p>Sort: {sort}</p>
            
            <button onClick={() => setSearchParams({ category: 'electronics' })}>
                Electronics
            </button>
            <button onClick={() => setSearchParams({ sort: 'price' })}>
                Sort by Price
            </button>
        </div>
    );
}

Swipe to see more code

// Using query parameters
import { useSearchParams } from 'react-router-dom';

function ProductList() {
    const [searchParams, setSearchParams] = useSearchParams();
    const category = searchParams.get('category');
    const sort = searchParams.get('sort');
    
    return (
        <div>
            <h1>Products</h1>
            <p>Category: {category}</p>
            <p>Sort: {sort}</p>
            
            <button onClick={() => setSearchParams({ category: 'electronics' })}>
                Electronics
            </button>
            <button onClick={() => setSearchParams({ sort: 'price' })}>
                Sort by Price
            </button>
        </div>
    );
}

Scroll

🎯 Practice Exercise

Test your understanding of this topic:

I understand the basic concepts covered in this topicI can apply the concepts in practical scenariosI'm ready to move to the next topic

Nested Routes

Master nested routing to create complex navigation structures

Content by: Abhay Khanpara

MERN Stack Developer

Connect

What are Nested Routes?

Nested routes allow you to create a hierarchy of routes where child routes are rendered within parent routes. This is useful for creating layouts and complex navigation structures.

Basic Nested Routes

Code Example

// Parent route with nested children
<Route path="/dashboard" element={<Dashboard />}>
    <Route index element={<DashboardHome />} />
    <Route path="profile" element={<Profile />} />
    <Route path="settings" element={<Settings />} />
</Route>

// Dashboard component with Outlet
import { Outlet } from 'react-router-dom';

function Dashboard() {
    return (
        <div>
            <nav>
                <Link to="/dashboard">Home</Link>
                <Link to="/dashboard/profile">Profile</Link>
                <Link to="/dashboard/settings">Settings</Link>
            </nav>
            <main>
                <Outlet />
            </main>
        </div>
    );
}

// Child components
function DashboardHome() {
    return <h1>Dashboard Home</h1>;
}

function Profile() {
    return <h1>User Profile</h1>;
}

function Settings() {
    return <h1>Settings</h1>;
}

Swipe to see more code

// Parent route with nested children
<Route path="/dashboard" element={<Dashboard />}>
    <Route index element={<DashboardHome />} />
    <Route path="profile" element={<Profile />} />
    <Route path="settings" element={<Settings />} />
</Route>

// Dashboard component with Outlet
import { Outlet } from 'react-router-dom';

function Dashboard() {
    return (
        <div>
            <nav>
                <Link to="/dashboard">Home</Link>
                <Link to="/dashboard/profile">Profile</Link>
                <Link to="/dashboard/settings">Settings</Link>
            </nav>
            <main>
                <Outlet />
            </main>
        </div>
    );
}

// Child components
function DashboardHome() {
    return <h1>Dashboard Home</h1>;
}

function Profile() {
    return <h1>User Profile</h1>;
}

function Settings() {
    return <h1>Settings</h1>;
}

Scroll

Complex Nested Routes

Code Example

// Complex nested routing
<Route path="/admin" element={<AdminLayout />}>
    <Route index element={<AdminDashboard />} />
    <Route path="users" element={<UserManagement />}>
        <Route index element={<UserList />} />
        <Route path=":id" element={<UserDetail />} />
        <Route path="new" element={<CreateUser />} />
    </Route>
    <Route path="products" element={<ProductManagement />}>
        <Route index element={<ProductList />} />
        <Route path=":id" element={<ProductDetail />} />
        <Route path="new" element={<CreateProduct />} />
    </Route>
</Route>

// Admin Layout Component
function AdminLayout() {
    return (
        <div className="admin-layout">
            <header>
                <h1>Admin Panel</h1>
                <nav>
                    <Link to="/admin">Dashboard</Link>
                    <Link to="/admin/users">Users</Link>
                    <Link to="/admin/products">Products</Link>
                </nav>
            </header>
            <main>
                <Outlet />
            </main>
        </div>
    );
}

Swipe to see more code

// Complex nested routing
<Route path="/admin" element={<AdminLayout />}>
    <Route index element={<AdminDashboard />} />
    <Route path="users" element={<UserManagement />}>
        <Route index element={<UserList />} />
        <Route path=":id" element={<UserDetail />} />
        <Route path="new" element={<CreateUser />} />
    </Route>
    <Route path="products" element={<ProductManagement />}>
        <Route index element={<ProductList />} />
        <Route path=":id" element={<ProductDetail />} />
        <Route path="new" element={<CreateProduct />} />
    </Route>
</Route>

// Admin Layout Component
function AdminLayout() {
    return (
        <div className="admin-layout">
            <header>
                <h1>Admin Panel</h1>
                <nav>
                    <Link to="/admin">Dashboard</Link>
                    <Link to="/admin/users">Users</Link>
                    <Link to="/admin/products">Products</Link>
                </nav>
            </header>
            <main>
                <Outlet />
            </main>
        </div>
    );
}

Scroll

🎯 Practice Exercise

Test your understanding of this topic:

I understand the basic concepts covered in this topicI can apply the concepts in practical scenariosI'm ready to move to the next topic

Programmatic Navigation

Learn to navigate programmatically using React Router hooks and functions

Content by: Nitin Parmar

MERN Stack Developer

Connect

useNavigate Hook

The useNavigate hook returns a function that lets you navigate programmatically. This is useful for navigation after form submissions, API calls, or other events.

Basic Navigation

Code Example

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

function LoginForm() {
    const navigate = useNavigate();
    const [credentials, setCredentials] = useState({
        email: '',
        password: ''
    });

    const handleSubmit = async (e) => {
        e.preventDefault();
        
        try {
            // Simulate API call
            const response = await loginUser(credentials);
            
            if (response.success) {
                // Navigate to dashboard after successful login
                navigate('/dashboard');
            }
        } catch (error) {
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="email"
                value={credentials.email}
                onChange={(e) => setCredentials({
                    ...credentials,
                    email: e.target.value
                })}
                placeholder="Email"
            />
            <input
                type="password"
                value={credentials.password}
                onChange={(e) => setCredentials({
                    ...credentials,
                    password: e.target.value
                })}
                placeholder="Password"
            />
            <button type="submit">Login</button>
        </form>
    );
}

Swipe to see more code

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

function LoginForm() {
    const navigate = useNavigate();
    const [credentials, setCredentials] = useState({
        email: '',
        password: ''
    });

    const handleSubmit = async (e) => {
        e.preventDefault();
        
        try {
            // Simulate API call
            const response = await loginUser(credentials);
            
            if (response.success) {
                // Navigate to dashboard after successful login
                navigate('/dashboard');
            }
        } catch (error) {
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="email"
                value={credentials.email}
                onChange={(e) => setCredentials({
                    ...credentials,
                    email: e.target.value
                })}
                placeholder="Email"
            />
            <input
                type="password"
                value={credentials.password}
                onChange={(e) => setCredentials({
                    ...credentials,
                    password: e.target.value
                })}
                placeholder="Password"
            />
            <button type="submit">Login</button>
        </form>
    );
}

Scroll

Advanced Navigation

Code Example

// Navigation with state
function ProductCard({ product }) {
    const navigate = useNavigate();

    const handleViewDetails = () => {
        navigate(`/products/${product.id}`, {
            state: { product }
        });
    };

    const handleEdit = () => {
        navigate(`/products/${product.id}/edit`, {
            state: { product },
            replace: true
        });
    };

    return (
        <div>
            <h3>{product.name}</h3>
            <p>{product.description}</p>
            <button onClick={handleViewDetails}>View Details</button>
            <button onClick={handleEdit}>Edit</button>
        </div>
    );
}

// Receiving state in target component
function ProductDetail() {
    const location = useLocation();
    const product = location.state?.product;

    return (
        <div>
            <h1>{product?.name}</h1>
            <p>{product?.description}</p>
        </div>
    );
}

// Navigation with query parameters
function SearchResults() {
    const navigate = useNavigate();
    const [searchParams] = useSearchParams();

    const handleSort = (sortBy) => {
        const currentParams = Object.fromEntries(searchParams);
        navigate(`?${new URLSearchParams({
            ...currentParams,
            sort: sortBy
        })}`);
    };

    return (
        <div>
            <button onClick={() => handleSort('name')}>Sort by Name</button>
            <button onClick={() => handleSort('price')}>Sort by Price</button>
        </div>
    );
}

Swipe to see more code

// Navigation with state
function ProductCard({ product }) {
    const navigate = useNavigate();

    const handleViewDetails = () => {
        navigate(`/products/${product.id}`, {
            state: { product }
        });
    };

    const handleEdit = () => {
        navigate(`/products/${product.id}/edit`, {
            state: { product },
            replace: true
        });
    };

    return (
        <div>
            <h3>{product.name}</h3>
            <p>{product.description}</p>
            <button onClick={handleViewDetails}>View Details</button>
            <button onClick={handleEdit}>Edit</button>
        </div>
    );
}

// Receiving state in target component
function ProductDetail() {
    const location = useLocation();
    const product = location.state?.product;

    return (
        <div>
            <h1>{product?.name}</h1>
            <p>{product?.description}</p>
        </div>
    );
}

// Navigation with query parameters
function SearchResults() {
    const navigate = useNavigate();
    const [searchParams] = useSearchParams();

    const handleSort = (sortBy) => {
        const currentParams = Object.fromEntries(searchParams);
        navigate(`?${new URLSearchParams({
            ...currentParams,
            sort: sortBy
        })}`);
    };

    return (
        <div>
            <button onClick={() => handleSort('name')}>Sort by Name</button>
            <button onClick={() => handleSort('price')}>Sort by Price</button>
        </div>
    );
}

Scroll

🎯 Practice Exercise

Test your understanding of this topic:

I understand the basic concepts covered in this topicI can apply the concepts in practical scenariosI'm ready to move to the next topic

Previous Module

Module 2: React Hooks

Next Module

Module 4: State Management

Additional Resources

📚 Recommended Reading

•React Router Documentation
•React Router v6 Guide
•Client-Side Routing Best Practices

🌐 Online Resources

•React Router Tutorial
•Nested Routes Examples
•Programmatic Navigation Guide

Ready for the Next Module?

Continue your learning journey and master the next set of concepts.

Continue to Module 4

Module 3: React Router

React Router

Select Topics Overview

React Router Basics

Route Parameters

Nested Routes

Programmatic Navigation

React Router Basics

Route Parameters

Nested Routes

Programmatic Navigation

React Router Basics

What is React Router?

Key Features

Basic Setup

Practice Exercise: Basic Router Setup

🎯 Practice Exercise

Route Parameters

URL Parameters

Basic URL Parameters

Query Parameters

🎯 Practice Exercise

Nested Routes

What are Nested Routes?

Basic Nested Routes

Complex Nested Routes

🎯 Practice Exercise

Programmatic Navigation

useNavigate Hook

Basic Navigation

Advanced Navigation

🎯 Practice Exercise

Module 2: React Hooks

Module 4: State Management

Additional Resources

📚 Recommended Reading

🌐 Online Resources

Ready for the Next Module?