react-router

Declarative routing for React

weekly downloads23.6M

versionv7.13.0

licenseMIT

categoryfrontend

reactrouterrouteroutinghistorylink

Overview

react-router is the foundational routing library for React applications, providing platform-agnostic routing logic that powers single-page applications (SPAs). With over 23 million weekly downloads, it's the de facto standard for client-side navigation in React, enabling users to move between views without full page reloads while keeping the UI in sync with the URL.

The library implements declarative routing through React components, where routes are defined as part of your component tree rather than in separate configuration files. It uses the HTML5 History API (pushState, replaceState, popState) to manage browser history and URL changes without server roundtrips. This approach allows developers to build complex navigation patterns including nested routes, dynamic parameters, and programmatic redirects.

react-router serves as the core package that platform-specific implementations build upon. While it contains essential routing primitives like Routes, Route, and Outlet, most developers don't install it directly. Instead, they use react-router-dom for web applications or react-router-native for mobile apps, which include platform-specific features and components. As of version 7, the architecture has been unified to simplify dependency management and provide more consistent patterns across different platforms.

The library is maintained by Remix (formerly React Training) and has evolved significantly since its initial release, with version 7 introducing breaking changes that modernize the API and align it with current React patterns. It's used by companies of all sizes, from startups to Fortune 500 companies, as the primary navigation solution for React-based web applications.

Quick Start

typescript

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/products">Products</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<ProductLayout />}>
          <Route index element={<ProductList />} />
          <Route path=":productId" element={<ProductDetail />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

function ProductLayout() {
  return (
    <div>
      <h1>Products</h1>
      <Outlet />
    </div>
  );
}

function ProductList() {
  const products = ['laptop', 'phone', 'tablet'];
  return (
    <ul>
      {products.map(id => (
        <li key={id}>
          <Link to={`/products/${id}`}>{id}</Link>
        </li>
      ))}
    </ul>
  );
}

function ProductDetail() {
  const { productId } = useParams();
  const navigate = useNavigate();
  
  return (
    <div>
      <h2>Product: {productId}</h2>
      <button onClick={() => navigate('/products')}>Back to List</button>
    </div>
  );
}

function Home() {
  return <h1>Welcome Home</h1>;
}

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

Use Cases

Single-page application navigation: Building web apps where users navigate between dashboard, settings, profile pages without page reloads. Each route renders different components while maintaining application state and providing instant transitions.

Dynamic content pages: Creating routes with URL parameters like /products/:productId or /users/:username/posts/:postId where the same component renders different data based on the URL. Common in e-commerce sites, blogs, and content management systems.

Nested layouts and sub-navigation: Implementing complex UI hierarchies where parent routes define layouts (header, sidebar) and child routes render within those layouts. For example, an admin panel with persistent navigation and different sections for users, analytics, and settings.

Protected routes and authentication flows: Conditionally rendering routes based on user authentication state, redirecting unauthenticated users to login pages, and managing post-login redirects back to the originally requested page.

Multi-step forms and wizards: Building flows like checkout processes, onboarding sequences, or survey applications where each step has its own URL, allowing users to bookmark, share, or navigate back to specific steps using browser controls.

Pros & Cons

Pros

+Industry standard with extensive ecosystem, documentation, and community support for troubleshooting
+Declarative API that integrates naturally with React's component model and hooks
+Powerful nested routing system that simplifies complex layout hierarchies and code splitting
+Comprehensive navigation features including programmatic routing, route matching, and parameter handling
+Platform-agnostic core enables code reuse between web and native applications

Cons

−Version 7 introduced significant breaking changes requiring migration effort from v5/v6 codebases
−Bundle size can be substantial for simple applications that only need basic routing
−Learning curve for advanced features like loader functions, error boundaries, and nested route patterns
−Core package alone is insufficient for web apps, requiring react-router-dom as additional dependency
−Over-engineering risk for applications that might be better served by simpler navigation or Next.js file-based routing

Alternatives

@tanstack/react-routerv1.161.1

Modern and scalable routing for React applications

meta-frameworkreactlocation

1.9M / week

wouterv3.9.0

Minimalist-friendly ~1.5KB router for React

frontendreactpreact

974K / week

Install

bash

npm install react-router

bash

pnpm add react-router

bash

bun add react-router

Overview

Quick Start

typescript

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/products">Products</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<ProductLayout />}>
          <Route index element={<ProductList />} />
          <Route path=":productId" element={<ProductDetail />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

function ProductLayout() {
  return (
    <div>
      <h1>Products</h1>
      <Outlet />
    </div>
  );
}

function ProductList() {
  const products = ['laptop', 'phone', 'tablet'];
  return (
    <ul>
      {products.map(id => (
        <li key={id}>
          <Link to={`/products/${id}`}>{id}</Link>
        </li>
      ))}
    </ul>
  );
}

function ProductDetail() {
  const { productId } = useParams();
  const navigate = useNavigate();
  
  return (
    <div>
      <h2>Product: {productId}</h2>
      <button onClick={() => navigate('/products')}>Back to List</button>
    </div>
  );
}

function Home() {
  return <h1>Welcome Home</h1>;
}

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

Use Cases

Pros & Cons

Pros

+Industry standard with extensive ecosystem, documentation, and community support for troubleshooting
+Declarative API that integrates naturally with React's component model and hooks
+Powerful nested routing system that simplifies complex layout hierarchies and code splitting
+Comprehensive navigation features including programmatic routing, route matching, and parameter handling
+Platform-agnostic core enables code reuse between web and native applications

Cons

−Version 7 introduced significant breaking changes requiring migration effort from v5/v6 codebases
−Bundle size can be substantial for simple applications that only need basic routing
−Learning curve for advanced features like loader functions, error boundaries, and nested route patterns
−Core package alone is insufficient for web apps, requiring react-router-dom as additional dependency
−Over-engineering risk for applications that might be better served by simpler navigation or Next.js file-based routing