React Router DOM Explained — Complete Guide

In this tutorial, you will learn about React Router DOM Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

React Router DOM is the standard routing library for React web applications, providing declarative navigation, URL parameter handling, nested routes, and programmatic navigation.

What You'll Learn

• How to set up React Router DOM v6
• How to create routes and navigation
• How to use route parameters
• How to create nested layouts with Outlet
• How to protect routes

Why It Matters

React Router is the foundation of multi-page React applications. It handles the URL-to-component mapping that makes SPAs feel like traditional websites with fast client-side navigation.

Real-World Use

flowchart TD
    A[App] --> B[BrowserRouter]
    B --> C[Routes]
    C --> D[/]
    C --> E[/products/:id]
    C --> F[/cart]
    C --> G[/admin/*]
    style A fill:#3b82f6,color:#fff

Basic Setup

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

function Home() { return <h1>Home</h1>; }
function About() { return <h1>About</h1>; }
function Contact() { return <h1>Contact</h1>; }
function NotFound() { return <h1>404 - Not Found</h1>; }

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

Expected output: Navigation links that change the URL and render the corresponding component without page reload. Unknown URLs show a 404 page.

Common Mistakes

1. Forgetting to wrap with BrowserRouter
2. Using a tags instead of Link (causes full reloads)
3. Incorrect path matching order (more specific routes first)
4. Not handling the 404 catch-all route
5. Using exact in v6 (no longer needed, routes are exact by default)

Practice Questions

1. What does BrowserRouter do?
2. How is Link different from a regular anchor tag?
3. How do you handle 404 routes?
4. What is the Outlet component for?
5. How do you navigate programmatically?