Registry / web-framework / react-router-dom

react-router-dom

library7.14.1jsnpmunverified

React Router DOM (version 7.14.1) provides declarative routing for React web applications. It currently serves as a compatibility layer for projects migrating from React Router v6 to v7, re-exporting all components and hooks from the `react-router` package. While actively maintained with frequent minor and patch releases, its primary purpose is to facilitate migration, and users are encouraged to eventually remove it and import directly from `react-router` in v7 projects.

web-framework

npm install react-router-dom

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-ROUTER-DOM

react-router-dom

web-frameworkjavascriptv7.14.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

BrowserRouter

✓ import { BrowserRouter } from 'react-router-dom'

✗ const BrowserRouter = require('react-router-dom')

While this is the correct syntax for importing from `react-router-dom`, users of React Router v7 are strongly encouraged to import directly from `react-router` and remove `react-router-dom` from their dependencies after migration.

This example demonstrates a basic React application using `BrowserRouter` to set up client-side routing, defining different paths with `Routes` and `Route` components, and navigating between them with `Link`.

import React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; function App() { return ( <div> <nav> <Link to="/">Home</Link> | <Link to="/about">About</Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="*" element={<NoMatch />} /> </Routes> </div> ); } function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } function NoMatch() { return <h3>Nothing to see here!</h3>; } const root = ReactDOM.createRoot(document.getElementById('root')!); root.render( <React.StrictMode> <App /> </React.StrictMode> );

Debug

Known issues

breakingFor React Router v7 and newer, `react-router-dom` is no longer the primary package for web routing. All components and hooks are now directly available from `react-router`.

fix

Migrate your imports from `react-router-dom` to `react-router` (e.g., `import { BrowserRouter } from 'react-router'`) and remove `react-router-dom` from your `package.json`.

affects: >=7.0.0

deprecatedThe `react-router-dom` package is intended as an upgrade path from v6 to v7 of React Router and is recommended to be removed once your application has successfully migrated.

fix

Follow the migration guide for React Router v7 and import directly from `react-router`. Remove `react-router-dom` from your project dependencies.

affects: >=7.0.0

gotcha`react-router-dom` requires React 18 or newer as a peer dependency, meaning your project must use React version 18 or higher.

fix

Ensure `react` and `react-dom` are installed at version `>=18` in your project's `package.json`.

affects: >=7.0.0

gotchaThis package requires Node.js version 20.0.0 or higher. Older Node.js versions may lead to build errors or runtime issues.

fix

Upgrade your Node.js environment to version `20.0.0` or later.

affects: >=7.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'react-router-dom'

The `react-router-dom` package is missing from your project's dependencies or was prematurely removed after a v7 migration.

fix

If migrating to v7, ensure all imports have been changed to `react-router`. Otherwise, install `react-router-dom` via `npm install react-router-dom` or `yarn add react-router-dom`.

Error: useRoutes() may be used only in the context of a <Router> component.

React Router hooks like `useRoutes` (or components like `Routes` and `Route`) are used outside of a `BrowserRouter` (or other router) component.

fix

Wrap your application's root component or the section using routing components with `<BrowserRouter>`. For example: `<BrowserRouter><App/></BrowserRouter>`.

TypeError: Cannot read properties of undefined (reading 'Provider')

Your project is likely using an older version of React (e.g., React 17) while `react-router-dom` v7 expects React 18+ with its new root API.

fix

Upgrade `react` and `react-dom` in your `package.json` to version `18.0.0` or higher: `npm install react@^18 react-dom@^18`.

Upgrade

Version history

7.14.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/remix-run/react-router ↗

packagehttps://www.npmjs.com/package/react-router-dom ↗

homepagehttps://reactrouter.com ↗