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.7.0

Date: 2025-07-16

What's Changed

Unstable RSC APIs

We're excited to introduce experimental support for RSC in Data Mode via the following new APIs:

• unstable_RSCHydratedRouter
• unstable_RSCStaticRouter
• unstable_createCallServer
• unstable_getRSCStream
• unstable_matchRSCServerRequest
• unstable_routeRSCServerRequest

For more information, check out the blog post and the RSC Docs.

Minor Changes

• create-react-router - Add Deno as a supported and detectable package manager. Note that this detection will only work with Deno versions 2.0.5 and above. If you are using an older version version of Deno then you must specify the --package-manager CLI flag set to deno. (#12327)
• @react-router/remix-config-routes-adapter - Export DefineRouteFunction type alongside DefineRoutesFunction (#13945)

Patch Changes

• react-router - Handle InvalidCharacterError when validating cookie signature (#13847)

• react-router - Pass a copy of searchParams to the setSearchParams callback function to avoid mutations of the internal searchParams instance (#12784)

  • This causes bugs if you mutate the current stateful searchParams when a navigation is blocked because the internal instance gets out of sync with useLocation().search

• react-router - Support invalid Date in turbo-stream v2 fork (#13684)

• react-router - In Framework Mode, clear critical CSS in development after initial render (#13872, #13995)

• react-router - Strip search parameters from patchRoutesOnNavigation path param for fetcher calls (#13911)

• react-router - Skip scroll restoration on useRevalidator() calls because they're not new locations (#13671)

• react-router - Support unencoded UTF-8 routes in prerender config with ssr set to false (#13699)

• react-router - Do not throw if the url hash is not a valid URI component (#13247)

• react-router - Remove Content-Length header from Single Fetch responses (#13902)

• react-router - Fix a regression in createRoutesStub introduced with the middleware feature (#13946)

  • As part of that work we altered the signature to align with the new middleware APIs without making it backwards compatible with the prior AppLoadContext API

  • This permitted createRoutesStub to work if you were opting into middleware and the updated context typings, but broke createRoutesStub for users not yet opting into middleware

  • We've reverted this change and re-implemented it in such a way that both sets of users can leverage it

  • ⚠️ This may be a breaking bug for if you have adopted the unstable Middleware feature and are using createRoutesStub with the updated API.

    // If you have not opted into middleware, the old API should work again
    let context: AppLoadContext = {
      /*...*/
    };
    let Stub = createRoutesStub(routes, context);
    
    // If you have opted into middleware, you should now pass an instantiated
    // `unstable_routerContextProvider` instead of a `getContext` factory function.
    let context = new unstable_RouterContextProvider();
    context.set(SomeContext, someValue);
    let Stub = createRoutesStub(routes, context);
    

• @react-router/dev - Update vite-node to ^3.2.2 to support Vite 7 (#13781)

• @react-router/dev - Properly handle https protocol in dev mode (#13746)

• @react-router/dev - Fix missing styles when Vite's build.cssCodeSplit option is disabled (#13943)

• @react-router/dev - Allow .mts and .mjs extensions for route config file (#13931)

• @react-router/dev - Fix prerender file locations when cwd differs from project root (#13824)

• @react-router/dev - Improve chunk error logging when a chunk cannot be found during the build (#13799)

• @react-router/dev - Fix incorrectly configured externalConditions which had enabled module condition for externals and broke builds with certain packages (like Emotion) (#13871)

Unstable Changes

⚠️ Unstable features are not recommended for production use

• Add unstable RSC support for Data Mode (#13700)
  • For more information, see the RSC documentation

Changes by Package

• create-react-router
• react-router
• @react-router/architect
• @react-router/cloudflare
• @react-router/dev
• @react-router/express
• @react-router/fs-routes
• @react-router/node
• @react-router/remix-config-routes-adapter
• @react-router/serve

Full Changelog: v7.6.3...v7.7.0