React Router DOM Tutorial Examples

Introduction

React Router DOM stands as the cornerstone of navigation in modern React applications, enabling developers to build seamless single-page application experiences without sacrificing the traditional multi-page feel users expect. As the de facto routing library for React, React Router has evolved significantly over the years, with the latest version 7 continuing the tradition of providing robust, type-safe routing capabilities that integrate tightly with React's component-based architecture. Whether you're building a simple portfolio site or a complex enterprise application, understanding React Router DOM is essential for creating intuitive navigation flows that enhance both user experience and developer productivity.

The library has amassed over 3 billion downloads on npm, with more than 56,000 stars on GitHub, reflecting its widespread adoption and community trust. This popularity stems from React Router's ability to handle the complexities of client-side routing while maintaining a simple, declarative API that aligns naturally with React's component model. In this comprehensive guide, we'll explore everything from basic setup to advanced patterns, providing you with the knowledge needed to implement production-ready routing in your React applications.

What You'll Learn

This tutorial covers essential routing concepts for building modern React applications: basic route configuration with BrowserRouter and Routes components, dynamic routing with URL parameters using useParams, nested routes and layout patterns with the Outlet component, navigation with Link and NavLink components, protected routes and authentication guards, lazy loading with React.lazy and Suspense for performance, and React Router v7 features including loaders and actions for data management.

---

Getting Started with React Router DOM

Installation and Basic Setup

Before diving into routing concepts, you need to properly install and configure React Router DOM in your project. The installation process is straightforward and works with both npm and Yarn package managers. For npm-based projects, you can install the library using the command npm install react-router-dom, while Yarn users can use yarn add react-router-dom. Once installed, you have access to all the routing components needed to build your application's navigation structure.

The first step in setting up routing is wrapping your application with a router component. React Router provides several router types, with BrowserRouter being the most commonly used for web applications. This component uses the HTML5 History API to keep your UI in sync with the current URL, enabling clean, bookmarkable URLs without page reloads. The router should typically wrap your entire application at the root level, ensuring all components have access to routing context.

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

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

This basic setup establishes the routing foundation for your application. The BrowserRouter component creates a routing context that enables all child components to access routing information and navigation capabilities. It's important to note that while BrowserRouter is the standard choice for most applications, React Router also provides HashRouter for scenarios where server configuration for clean URLs isn't possible, and MemoryRouter for testing or non-browser environments. When choosing between router types, consider your deployment environment and whether you have control over server-side URL configuration.

Understanding Core Routing Components

React Router's power lies in its declarative approach to defining routes. The Routes component serves as a container for all route definitions, while individual Route components specify the mapping between URL paths and React components. This composition-based design keeps your routing configuration organized and easy to maintain, especially as your application grows in complexity. The Routes component evaluates all its child routes and renders the first one that matches the current URL, ensuring predictable routing behavior.

Each Route component requires a path prop that defines the URL pattern to match and an element prop that specifies the component to render when that path is active. React Router v6 introduced significant improvements to the routing API, including more intuitive path matching with support for route parameters and nested routes. The element prop accepts any React component, giving you full flexibility in how you structure your page content.

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

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

The routing configuration above demonstrates the fundamental pattern for defining routes in React Router v6 and v7. Each route maps a specific URL path to a corresponding component, and the Routes component handles the logic of selecting which route to display based on the current URL. This approach keeps your routing logic centralized and easy to understand, as opposed to more imperative routing approaches that scatter navigation logic throughout your components. For teams building professional web applications, proper route organization is crucial for maintainability as your application scales, so consider creating dedicated route files for larger applications.

Dynamic Routing and URL Parameters

Capturing Dynamic Segments

Dynamic routing represents one of React Router's most powerful features, enabling you to create flexible routes that respond to changing data. Rather than defining separate routes for every possible page, dynamic routing allows you to define route patterns that capture variable segments of the URL. These captured segments become parameters you can access in your components, enabling you to create reusable page templates that display different content based on the URL.

To define a dynamic route segment, prefix a path segment with a colon character. For example, a route path of /products/:productId would match URLs like /products/123 or /products/abc, capturing the value after the slash as the productId parameter. This parameter is then accessible in your component through the useParams hook, which extracts all route parameters from the current URL. The same approach works for multiple parameters, such as /categories/:categoryId/products/:productId, allowing you to build complex, hierarchical URL structures.

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

function ProductDetail() {
 const { productId } = useParams();

 return (
 <div>
 <h1>Product Details</h1>
 <p>Viewing product with ID: {productId}</p>
 </div>
 );
}

The useParams hook returns an object containing all route parameters extracted from the current URL. This hook works at any depth in your component tree, as long as the component is rendered within a Routes context. The parameters are always strings, so you may need to convert them to numbers or other types when working with numeric IDs. This dynamic routing capability is essential for building product pages, user profiles, and any content that requires unique URLs for individual items. When combining dynamic parameters with static segments, place static segments before dynamic ones for more predictable matching behavior.

Search Parameters and Query Strings

Beyond path parameters, React Router provides the useSearchParams hook for working with URL query strings. This hook returns an array containing a SearchParams object and a function to update the search parameters, following the same pattern as React's state management. Query strings are useful for filtering, sorting, and pagination scenarios where you want to maintain URL state without creating entirely new routes.

The SearchParams object provides methods for reading, setting, and removing parameters, making it easy to implement filter functionality that users can bookmark or share. When you update search parameters, React Router automatically updates the URL and re-renders components that use the hook, ensuring your UI stays synchronized with the URL state. This pattern is particularly valuable for search results pages, product catalogs, and any interface where users might want to share filtered views.

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

function ProductCatalog() {
 const [searchParams, setSearchParams] = useSearchParams();
 const category = searchParams.get('category') || 'all';
 const sortBy = searchParams.get('sort') || 'newest';

 const handleCategoryChange = (newCategory) => {
 setSearchParams(prev => {
 if (newCategory === 'all') {
 prev.delete('category');
 } else {
 prev.set('category', newCategory);
 }
 return prev;
 });
 };

 return (
 <div>
 <h1>Products - {category}</h1>
 <button onClick={() => handleCategoryChange('electronics')}>
 Electronics
 </button>
 <button onClick={() => handleCategoryChange('clothing')}>
 Clothing
 </button>
 </div>
 );
}

This pattern enables sophisticated filtering and sorting capabilities while maintaining URL shareability. Users can copy the URL and send it to others, who will see the same filtered view. For e-commerce platforms and content-heavy applications, properly implemented query parameters also contribute to search engine optimization by allowing search engines to index filtered views.

Navigation Components and Patterns

Using Link for Declarative Navigation

The Link component provides the primary way to navigate between routes in React Router applications. Unlike traditional anchor tags that cause full page reloads, Link components perform client-side navigation, updating the URL and rendering the appropriate route without leaving the single-page application context. This results in faster, smoother transitions between pages while maintaining the expected navigation behavior users are familiar with from traditional websites.

The Link component accepts a to prop that specifies the destination path, along with optional props for styling and additional attributes. The to prop can be a simple string path, an object with pathname, search, and hash properties, or even a function that returns a path based on current state. This flexibility enables complex navigation scenarios, such as preserving current filter settings when navigating to a detail page, while maintaining a simple API for common use cases.

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

function Navigation() {
 return (
 <nav>
 <ul>
 <li>
 <Link to="/">Home</Link>
 </li>
 <li>
 <Link to="/about">About</Link>
 </li>
 <li>
 <Link to="/products">Products</Link>
 </li>
 </ul>
 </nav>
 );
}

Using Link components throughout your application ensures consistent, performant navigation. The component handles all the complexity of updating the browser history state and triggering route matching, allowing you to focus on your application's functionality rather than navigation mechanics. For enhanced accessibility, consider adding aria-labels and proper semantic markup to your navigation components.

NavLink for Active State Styling

The NavLink component extends Link with additional functionality for styling links based on their active state. When a NavLink's to prop matches the current URL, the component receives an isActive prop that you can use to apply different styles. This is particularly useful for navigation menus where you want to highlight the currently selected item, providing visual feedback about the user's current location within the application.

The NavLink component also supports the end prop, which specifies that the link should only be considered active when the current URL exactly matches the to prop. Without the end prop, a link to /products would also be active when viewing /products/123 due to prefix matching. The end prop solves this issue, making it ideal for top-level navigation items where you want the link to represent a distinct section rather than a prefix.

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

function Navigation() {
 return (
 <nav>
 <NavLink
 to="/"
 className={({ isActive }) => isActive ? "active" : ""}
 >
 Home
 </NavLink>
 <NavLink
 to="/products"
 end
 className={({ isActive }) => isActive ? "active" : ""}
 >
 Products
 </NavLink>
 </nav>
 );
}

This pattern creates visually intuitive navigation that helps users understand their current position within your application. The active state styling can include CSS classes for different colors, underlining, or any visual indicator that distinguishes the current section from others in the navigation. For more complex styling needs, you can also use the style prop with a function that returns style objects based on the active state.

Programmatic Navigation with useNavigate

While Link and NavLink handle most navigation needs, there are scenarios where you need to navigate programmatically in response to user actions or application state changes. The useNavigate hook provides a function that enables imperative navigation, allowing you to trigger route changes from anywhere in your component tree. This is essential for scenarios like form submissions, authentication flows, or any action that should result in navigation.

The navigate function returned by useNavigate accepts the same types of values as the to prop of Link, including string paths, location objects, and optional options for controlling navigation behavior. The second argument to navigate allows you to specify options like replace to replace the current history entry instead of adding a new one, which is useful after successful form submissions to prevent users from navigating back to the form.

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

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

 const handleSubmit = async (event) => {
 event.preventDefault();
 const formData = new FormData(event.target);
 const success = await authenticateUser(Object.fromEntries(formData));

 if (success) {
 navigate('/dashboard', { replace: true });
 }
 };

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

This programmatic navigation pattern integrates naturally with React's event handling and state management, enabling complex navigation flows that respond to user interactions and application logic. For error handling, you can also navigate to error pages or show validation messages before redirecting users to appropriate sections of your application.

Nested Routes and Layout Patterns

Creating Hierarchical Navigation Structures

Nested routes enable you to create hierarchical page structures that mirror your application's information architecture. By nesting routes within other route components, you can build layouts where parent components render shared UI elements like navigation bars or sidebars, while child routes render within specific content areas. This pattern reduces code duplication and creates more maintainable, modular applications where each route component has a clear, focused responsibility.

Implementing nested routes requires defining child routes with paths that include their parent's path as a prefix. The parent component renders an Outlet component from React Router, which serves as a placeholder where child route content will be rendered. This composition-based approach keeps parent and child concerns separate while enabling flexible layouts that adapt to different sections of your application.

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

function DashboardLayout() {
 return (
 <div className="dashboard">
 <nav>
 <Link to="/dashboard/overview">Overview</Link>
 <Link to="/dashboard/analytics">Analytics</Link>
 <Link to="/dashboard/settings">Settings</Link>
 </nav>
 <main>
 <Outlet />
 </main>
 </div>
 );
}

function DashboardRoutes() {
 return (
 <Routes>
 <Route path="/dashboard" element={<DashboardLayout />}>
 <Route index element={<DashboardOverview />} />
 <Route path="analytics" element={<Analytics />} />
 <Route path="settings" element={<Settings />} />
 </Route>
 </Routes>
 );
}

This pattern is particularly valuable for dashboard-style applications, admin panels, and any interface with consistent navigation across multiple sections. The layout component handles shared UI concerns while remaining agnostic to which child route is currently active, and child components focus on their specific content without worrying about surrounding navigation. The index route (using path="/dashboard" with no additional path segment) renders when the parent path matches exactly, providing a default view for the section.

Layout Routes for Shared UI

React Router v6 introduced the concept of layout routes, which are routes that exist purely to provide a consistent wrapper for child routes without adding additional path segments. Layout routes use the same nesting syntax but with an index route or child routes that render within the layout's Outlet. This enables you to apply common UI patterns like headers, footers, or authentication checks across multiple routes without repeating code.

Layout routes are defined by creating a route with an element prop that wraps an Outlet, and then defining child routes within that route's configuration. The child routes render within the layout's outlet while inheriting the layout's path prefix. This pattern is ideal for authenticated areas of your application, sections with consistent sidebars or toolbars, and any collection of routes that share common UI elements. By combining layout routes with protected route patterns, you can create secure sections of your application that share consistent navigation and UI components.

Protected Routes and Authentication

Building Route Guards

Route guards protect sensitive areas of your application by checking authentication state before rendering protected content. This pattern is essential for applications with user accounts, admin panels, or any content that should only be accessible to authenticated users. A route guard component wraps protected routes and redirects unauthenticated users to a login page while rendering the protected content for authenticated users.

The implementation typically involves creating a wrapper component that checks authentication state and renders either the protected component or a redirect. This wrapper becomes the element for routes that require authentication, effectively creating a gate that controls access based on user credentials. The redirect uses the replace option to prevent users from navigating back to the protected route after being redirected.

import { Navigate, Outlet } from 'react-router-dom';

function ProtectedRoute({ isAuthenticated, children }) {
 if (!isAuthenticated) {
 return <Navigate to="/login" replace />;
 }

 return children || <Outlet />;
}

// Usage in route configuration
function AppRoutes() {
 return (
 <Routes>
 <Route path="/login" element={<Login />} />
 <Route element={<ProtectedRoute isAuthenticated={user.isLoggedIn} />}>
 <Route path="/dashboard" element={<Dashboard />} />
 <Route path="/settings" element={<Settings />} />
 </Route>
 </Routes>
 );
}

This pattern can be extended to support role-based access control, where different user roles have access to different routes. By adding role checking to the route guard component, you can create fine-grained permissions that control which users can access which sections of your application. For more complex permission systems, consider creating multiple protected route wrapper components for different access levels. Many modern web applications also integrate with third-party authentication providers, and understanding this pattern is essential for building secure custom web applications.

Managing Authentication State

Authentication state management typically integrates React Router with a state management solution or authentication context. The authentication context provides the isAuthenticated value and login/logout functions that route guards and navigation components depend on. This separation of concerns keeps authentication logic centralized while making it accessible throughout the application.

The authentication context pattern involves creating a context provider that maintains authentication state and exposes methods for login and logout operations. Components that need to check authentication status can use the context, while navigation components can use the context to show or hide login/logout buttons based on the current state. This approach ensures consistent authentication state across the application and simplifies testing of authentication-dependent components. For production applications, consider integrating with established authentication libraries that provide secure token management and session handling.

Performance Optimization

Lazy Loading Routes with React.lazy

Code splitting through lazy loading is essential for maintaining fast initial load times in larger React applications. By default, React bundles all components into a single JavaScript file, which can become large as your application grows. Lazy loading allows you to split your application into smaller chunks that are loaded on demand, reducing the initial bundle size and improving time-to-interactive metrics.

The React.lazy function enables lazy loading by accepting a function that returns a dynamic import for the component. This function is only called when the component is first rendered, triggering the network request for the chunk containing that component. React Router integrates naturally with this pattern, as route components are only rendered when their path matches, making lazy loading routes straightforward and effective.

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

const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Analytics = lazy(() => import('./pages/Analytics'));

function App() {
 return (
 <Suspense fallback={<div>Loading...</div>}>
 <Routes>
 <Route path="/" element={<Home />} />
 <Route path="/dashboard" element={<Dashboard />} />
 <Route path="/analytics" element={<Analytics />} />
 </Routes>
 </Suspense>
 );
}

The Suspense component provides a fallback UI while lazy-loaded components are being loaded, ensuring users see meaningful feedback during chunk loading. This pattern is particularly valuable for routes that contain heavy dependencies like charts, maps, or rich text editors, as those dependencies won't be loaded until the user actually navigates to that route. Consider creating a reusable Loading component that matches your application's visual style.

Route-Based Code Splitting

Route-based code splitting takes lazy loading further by ensuring each route gets its own chunk. This approach aligns bundle boundaries with user navigation, meaning users only download code for routes they've visited. The lazy loading pattern shown above achieves this automatically, as each dynamic import creates a separate chunk for that route and its dependencies.

Implementing route-based code splitting requires no changes to the routing configuration beyond using React.lazy for route components. The build tool (Webpack, Vite, or Rollup) handles the chunk creation and naming, typically producing chunk files named after the dynamic import path. This automatic chunking makes route-based code splitting one of the easiest performance optimizations to implement, with significant benefits for application load times. Monitor your bundle analysis to identify opportunities for further code splitting in large applications.

Route Preloading and Prefetching

For applications where instant navigation is critical, route preloading can eliminate perceived latency by loading route components and data before users actually navigate. React Router's prefetching behavior can be customized to load route components and data before the user actually clicks a link, creating near-instant navigation experiences.

Implementing prefetching typically involves creating a custom link component that prefetches route data on hover, or using React Router's built-in capabilities for preloading. The key is balancing the benefits of faster navigation against the cost of prefetching data that might never be used, as aggressive prefetching can increase bandwidth usage and server load. Consider user behavior patterns when implementing prefetching--pages users are likely to visit next are good candidates for prefetching.

React Router v7 Features and Migration

What's New in React Router v7

React Router v7 represents a significant evolution of the library, building upon the solid foundation of v6 while introducing features that bridge the gap between traditional React applications and the latest React capabilities. The library maintains non-breaking compatibility with v6, meaning existing applications can upgrade without code changes. This commitment to backward compatibility has made v7 adoption straightforward for teams with established React Router implementations.

The new version introduces enhanced type safety through first-class TypeScript support, with automatic type generation for route params, loader data, actions, and more. This type safety catches errors at compile time rather than runtime, improving developer productivity and reducing bugs. The type generation works seamlessly with modern TypeScript configurations, providing intelligent autocomplete and type checking throughout your routing code. For teams using TypeScript, this feature alone provides significant value in preventing common routing-related bugs.

Framework Features and Data Management

React Router v7 introduces framework-like features previously associated with full-stack frameworks, including data loading and mutations through loaders and actions. These features enable you to fetch data for routes before rendering, handle form submissions without client-side JavaScript, and implement progressive enhancement patterns that work even when JavaScript is disabled or fails to load.

The loader pattern provides a way to fetch data on the server or client before rendering a route component. Loaders run before the route renders, and their return values are accessible through the useLoaderData hook in route components. This pattern simplifies data fetching by co-locating data requirements with route definitions, eliminating the need for separate API calls scattered throughout component trees. Actions provide a similar pattern for handling form submissions and data mutations, enabling full-stack-like patterns in client-side applications.

Migration Considerations

Migrating from React Router v6 to v7 is designed to be straightforward, with most applications requiring no code changes. The library maintains API compatibility for common use cases while providing new patterns for teams wanting to leverage v7's enhanced features. For teams using custom routing configurations or specialized patterns, the migration guide provides detailed instructions for adapting existing code.

The recommended migration approach involves updating the package version, testing existing functionality, and then gradually adopting new v7 features as needed. This incremental approach minimizes risk while allowing teams to take advantage of improvements like enhanced type safety and framework features at their own pace. The stability of the v6 API means that even teams not ready to adopt new features can benefit from v7's improvements in bundle size and performance.

---

Error Handling and Edge Cases

404 Pages and Catch-All Routes

Handling unknown routes gracefully is essential for user experience and SEO. A catch-all route using path="*" matches any URL that doesn't match other routes, allowing you to render a 404 page or redirect users to a valid route. This route should always be the last route in your Routes component, as routes are evaluated in order and the first match wins.

The 404 page should provide clear guidance to users about what happened and what they can do next. Common patterns include displaying a friendly error message, showing links to popular pages, and providing a search function to help users find what they're looking for. A well-designed 404 page turns a potential dead end into an opportunity to keep users engaged with your application. Properly configured 404 pages also help improve your site's SEO by preventing search engines from indexing error pages.

function NotFound() {
 return (
 <div className="not-found">
 <h1>404 - Page Not Found</h1>
 <p>The page you're looking for doesn't exist.</p>
 <Link to="/">Go Home</Link>
 </div>
 );
}

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

Error Boundaries for Routes

React Router works well with React's error boundary pattern for handling errors within route components. By wrapping route elements in error boundaries, you can catch and display errors gracefully without crashing the entire application. This is particularly valuable for routes that load external data or components that might fail due to network issues or unhandled exceptions.

Error boundaries can be implemented as higher-order components or as regular components with a componentDidCatch lifecycle method or getDerivedStateFromError static method. When an error occurs within a wrapped route, the error boundary catches it and renders a fallback UI, keeping the rest of the application functional. This pattern is essential for production applications where unexpected errors should never prevent users from navigating to other parts of the application. Consider creating a dedicated ErrorBoundary component that you can reuse across different routes.

Advanced Patterns and Best Practices

Centralized Route Configuration

Maintaining a centralized route configuration improves code organization and makes it easier to understand and modify your application's navigation structure. Rather than scattering route definitions throughout components, keep all routes in a dedicated file or module that exports the complete route tree. This approach simplifies navigation changes, enables route-based code splitting at the build level, and provides a single source of truth for URL-to-component mappings.

The centralized configuration can use various organizational patterns depending on your application's complexity. Simple applications might use a single routes array, while larger applications might split routes into separate files by feature or module. The key principle is keeping route definitions organized and discoverable, making it easy for developers to understand the complete navigation structure at a glance. Consider using route constants for path strings to prevent typos and enable IDE autocompletion.

Route Preloading and Prefetching

For applications where instant navigation is critical, route preloading and prefetching can eliminate perceived latency when users navigate to new pages. React Router's prefetching behavior can be customized to load route components and data before the user actually clicks a link, creating near-instant navigation experiences. This pattern is particularly valuable for mobile users or applications where navigation latency impacts user experience.

Implementing prefetching typically involves creating a custom link component that prefetches route data on hover, or using React Router's built-in capabilities for preloading. The key is balancing the benefits of faster navigation against the cost of prefetching data that might never be used, as aggressive prefetching can increase bandwidth usage and server load. Monitor your network activity to find the right balance between perceived performance and actual bandwidth consumption.

---

Conclusion

React Router DOM remains the essential library for navigation in React applications, offering a powerful yet approachable solution for everything from simple navigation to complex, nested routing structures. The library's evolution from v6 to v7 demonstrates ongoing commitment to type safety, performance, and developer experience. With over 3 billion downloads and strong community support, React Router continues to be the standard choice for React navigation.

Proper routing implementation directly impacts user experience through faster page transitions, better SEO through clean URLs, and improved maintainability through organized code structure. As you build React applications, investing time in understanding routing patterns pays dividends throughout your application's lifecycle. Whether you're working on a simple landing page or a complex enterprise application, the concepts covered in this guide provide a foundation for building intuitive, performant navigation experiences.

Key Takeaways

This tutorial covered the essential concepts for implementing React Router in modern applications: installing and configuring React Router with BrowserRouter, creating routes and understanding path matching in the Routes component, implementing dynamic parameters with useParams for flexible routing, using navigation components including Link for declarative navigation and useNavigate for programmatic flows, building protected routes with authentication guards for secure sections, optimizing performance through lazy loading with React.lazy and Suspense, and adopting React Router v7 features including enhanced type safety and framework capabilities. As React continues to evolve, staying current with React Router updates ensures your applications benefit from the latest improvements in routing technology. Our web development team specializes in building React applications with best-practice routing implementations.

Sources

1. React Router Official Documentation - Core routing concepts and v7 features
2. LogRocket: React Router DOM Tutorial Examples - Code examples and practical tutorials
3. NamasteDev: React Router DOM Best Practices - Best practices and optimization techniques