react-router-dom

What is react-router-dom?

The react-router-dom package is a popular library for handling routing in React web applications. It allows developers to implement dynamic routing in a web app, which is not possible with static routing. With react-router-dom, you can define routes, navigate between them, handle parameters and query strings, and manage the history stack, among other things.

What are react-router-dom's main functionalities?

Basic Routing

This code demonstrates how to set up basic routing in a React application using react-router-dom. It uses the BrowserRouter, Route, and Switch components to define routes for different components in the app.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route path='/about' component={About} />
        <Route path='/contact' component={Contact} />
      </Switch>
    </Router>
  );
}

Link Navigation

This code snippet shows how to use the Link component to create navigation links that allow users to click through different routes without causing a page reload.

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

Route Parameters

This example demonstrates how to handle dynamic routes using route parameters. The useParams hook is used to access the parameters of the current route.

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

function User() {
  let { userId } = useParams();
  return <h2>User ID: {userId}</h2>;
}

function Users() {
  return (
    <Route path='/users/:userId' component={User} />
  );
}

Programmatic Navigation

This code shows how to navigate programmatically using the useHistory hook. It allows you to push a new entry onto the history stack, mimicking the behavior of a navigation action.

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

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push('/home');
  }

  return (
    <button type='button' onClick={handleClick}>
      Go home
    </button>
  );
}

Other packages similar to react-router-dom

reach-router

Reach Router is another routing library for React with a more straightforward, accessible approach compared to react-router-dom. It automatically manages focus for accessibility, and routing is more component-based. However, as of my knowledge cutoff in 2023, Reach Router has been officially merged with React Router, and the team recommends using React Router for new projects.

wouter

Wouter is a minimalist routing library for React and Preact that does not rely on the context API. It offers a simpler API and smaller bundle size compared to react-router-dom, making it a good choice for smaller projects or when you want to keep your project lightweight.

navi

Navi is a JavaScript library for declaratively mapping URLs to asynchronous content. It's designed to work with React and allows for lazy-loading routes, which can help improve performance in large applications. Navi provides a different approach to routing by focusing on content-first routing, which can be beneficial for certain types of applications.

README

This package simply re-exports everything from react-router to smooth the upgrade path for v6 applications. Once upgraded you can change all of your imports and remove it from your dependencies:

-import { Routes } from "react-router-dom"
+import { Routes } from "react-router"

Changelog

v7.6.1

Date: 2025-05-25

Patch Changes

• react-router - Partially revert optimization added in 7.1.4 to reduce calls to matchRoutes because it surfaced other issues (#13562)

• react-router - Update Route.MetaArgs to reflect that data can be potentially undefined (#13563)

  • This is primarily for cases where a route loader threw an error to it's own ErrorBoundary, but it also arises in the case of a 404 which renders the root ErrorBoundary/meta but the root loader did not run because not routes matched

• react-router - Avoid initial fetcher execution 404 error when Lazy Route Discovery is interrupted by a navigation (#13564)

• react-router - Properly href replaces splats * (#13593)

  • href("/products/*", { "*": "/1/edit" }); // -> /products/1/edit

• @react-router/architect - Update @architect/functions from ^5.2.0 to ^7.0.0 (#13556)

• @react-router/dev - Prevent typegen with route files that are outside the app/ directory (#12996)

• @react-router/dev - Add additional logging to build command output when cleaning assets from server build (#13547)

• @react-router/dev - Don't clean assets from server build when build.ssrEmitAssets has been enabled in Vite config (#13547)

• @react-router/dev - Fix typegen when same route is used at multiple paths (#13574)

  • For example, routes/route.tsx is used at 4 different paths here:

    import { type RouteConfig, route } from "@react-router/dev/routes";
    export default [
      route("base/:base", "routes/base.tsx", [
        route("home/:home", "routes/route.tsx", { id: "home" }),
        route("changelog/:changelog", "routes/route.tsx", { id: "changelog" }),
        route("splat/*", "routes/route.tsx", { id: "splat" }),
      ]),
      route("other/:other", "routes/route.tsx", { id: "other" }),
    ] satisfies RouteConfig;
    

  • Previously, typegen would arbitrarily pick one of these paths to be the "winner" and generate types for the route module based on that path

  • Now, typegen creates unions as necessary for alternate paths for the same route file

• @react-router/dev - Better types for params (#13543)

  • For example:

    // routes.ts
    import { type RouteConfig, route } from "@react-router/dev/routes";
    
    export default [
      route("parent/:p", "routes/parent.tsx", [
        route("route/:r", "routes/route.tsx", [
          route("child1/:c1a/:c1b", "routes/child1.tsx"),
          route("child2/:c2a/:c2b", "routes/child2.tsx"),
        ]),
      ]),
    ] satisfies RouteConfig;
    

  • Previously, params for routes/route were calculated as { p: string, r: string }.

  • This incorrectly ignores params that could come from child routes

  • If visiting /parent/1/route/2/child1/3/4, the actual params passed to routes/route will have a type of { p: string, r: string, c1a: string, c1b: string }

  • Now, params are aware of child routes and autocompletion will include child params as optionals:

    params.|
    //     ^ cursor is here and you ask for autocompletion
    // p: string
    // r: string
    // c1a?: string
    // c1b?: string
    // c2a?: string
    // c2b?: string
    

  • You can also narrow the types for params as it is implemented as a normalized union of params for each page that includes routes/route:

    if (typeof params.c1a === 'string') {
      params.|
      //     ^ cursor is here and you ask for autocompletion
      // p: string
      // r: string
      // c1a: string
      // c1b: string
    }
    

• @react-router/dev - Fix href for optional segments (#13595)

  • Type generation now expands paths with optionals into their corresponding non-optional paths

  • For example, the path /user/:id? gets expanded into /user and /user/:id to more closely model visitable URLs

  • href then uses these expanded (non-optional) paths to construct type-safe paths for your app:

    // original: /user/:id?
    // expanded: /user & /user/:id
    href("/user"); // ✅
    href("/user/:id", { id: 1 }); // ✅
    

  • This becomes even more important for static optional paths where there wasn't a good way to indicate whether the optional should be included in the resulting path:

    // original: /products/:id/detail?
    
    // before
    href("/products/:id/detail?"); // ❌ How can we tell `href` to include or omit `detail?` segment with a complex API?
    
    // now
    // expanded: /products/:id & /products/:id/detail
    href("/product/:id"); // ✅
    href("/product/:id/detail"); // ✅
    

Unstable Changes

⚠️ Unstable features are not recommended for production use

• @react-router/dev - Renamed internal react-router/route-module export to react-router/internal (#13543)
• @react-router/dev - Removed Info export from generated +types/* files (#13543)
• @react-router/dev - Normalize dirent entry path across node versions when generating SRI manifest (#13591)

Full Changelog: v7.6.0...v7.6.1