react-router

library7.14.1jsnpmunverified

React Router is the foundational library for declarative client-side routing in React applications. It provides a robust, component-based approach to managing navigation and UI synchronization with URLs. The current stable version is 7.14.1, which builds upon the significant architectural changes introduced in v6, emphasizing a hooks-centric API and simpler routing patterns. The project maintains a relatively frequent release cadence, often issuing minor updates and patches, reflecting active development and community engagement. Key differentiators include its deep integration with the React component lifecycle, enabling dynamic and nested routing, and its focus on being a core part of the Remix ecosystem, offering a coherent experience for web development.

web-framework

npm install react-router

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-ROUTER

react-router

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';

✗ import { BrowserRouter } from 'react-router';

BrowserRouter (and other DOM-specific components) moved to `react-router-dom` in v4 and onwards. `react-router` is the core logic.

Routes

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

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

The `Switch` component was replaced by `Routes` in v6. `Routes` matches the first child `Route` that renders a path.

useNavigate

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

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

The `useHistory` hook was replaced by `useNavigate` in v6, offering a more imperative way to change routes programmatically.

This quickstart demonstrates basic routing with `BrowserRouter`, nested routes with `Outlet`, dynamic parameters with `useParams`, and navigation with `Link` in a typical React application.

import React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter, Routes, Route, Link, Outlet, useParams } from 'react-router-dom'; const Home = () => <h2>Home</h2>; const About = () => <h2>About</h2>; const Dashboard = () => ( <div> <h2>Dashboard</h2> <nav> <Link to="./invoices">Invoices</Link> |{' '} <Link to="./team">Team</Link> </nav> <Outlet /> </div> ); const Invoices = () => <h3>Invoices Section</h3>; const Team = () => <h3>Team Section</h3>; const UserProfile = () => { const { id } = useParams(); return <h3>User ID: {id}</h3>; }; function App() { return ( <BrowserRouter> <nav> <Link to="/">Home</Link> |{' '} <Link to="/about">About</Link> |{' '} <Link to="/dashboard">Dashboard</Link> |{' '} <Link to="/users/123">User 123</Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/dashboard" element={<Dashboard />}> <Route path="invoices" element={<Invoices />} /> <Route path="team" element={<Team />} /> <Route index element={<div>Select an item</div>} /> </Route> <Route path="/users/:id" element={<UserProfile />} /> <Route path="*" element={<h2>Not Found</h2>} /> </Routes> </BrowserRouter> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);

Debug

Known issues

breakingReact Router v6 introduced a complete rewrite with a focus on a hooks-based API, eliminating `Switch`, `useHistory`, and the `component`/`render` props on `Route`. The routing configuration shifted from children to the `element` prop.

fix

Migrate `Switch` to `Routes`, `useHistory` to `useNavigate`, and `component`/`render` props to `element` prop for `Route` components. Review official migration guides for comprehensive changes.

affects: >=6.0.0

breakingCommonJS (CJS) `require()` syntax is no longer supported for `react-router` and `react-router-dom` since v6. These packages are now ESM-only.

fix

Update your project to use ES modules (`import`/`export`) or use a bundler that transpiles ESM to CJS if necessary (though not recommended for newer Node environments). Ensure your `package.json` includes `"type": "module"` if using ESM directly in Node.

affects: >=6.0.0

gotchaIncorrect usage of `BrowserRouter` (or other routers) outside of the root of your application, or rendering it multiple times, can lead to unexpected navigation behavior and state inconsistencies.

fix

Ensure `BrowserRouter` wraps your entire application and is rendered only once, typically in `src/index.tsx` or `src/App.tsx`.

affects: >=4.0.0

breakingRelative paths in `Link` and `useNavigate` work differently in v6, using the current route's path as the base. Absolute paths now require a leading slash explicitly.

fix

Review all `Link` `to` props and `useNavigate` calls. If you intend an absolute path, prefix it with `/`. For relative paths, understand the new base behavior, and use `..` for parent segments.

affects: >=6.0.0

gotchaMissing or incorrect peer dependencies for `react` and `react-dom` can cause runtime errors due to incompatibilities. React Router v7 requires React 18 or newer.

fix

Ensure your project's `package.json` specifies `react` and `react-dom` versions compatible with `^18.0.0` or higher, matching the peer dependency requirements, and run `npm install`.

affects: >=7.0.0

Errors

Common errors & fixes

Error: Invariant failed: You should not use <BrowserRouter> outside a <Router>

Attempting to use DOM-specific components (like `BrowserRouter`) directly from `react-router` instead of `react-router-dom`.

fix

Change your import statement from `import { BrowserRouter } from 'react-router';` to `import { BrowserRouter } from 'react-router-dom';`

TypeError: (0 , react_router_dom__WEBPACK_IMPORTED_MODULE_2__.useHistory) is not a function

Attempting to use the `useHistory` hook from a React Router v6+ project.

fix

Replace `useHistory()` with `useNavigate()` and adapt its usage. `useNavigate` returns a function to imperatively navigate, unlike `useHistory` which returned a history object.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Using the old `component` or `render` prop on a `<Route>` in React Router v6 or newer.

fix

Replace `component={MyComponent}` or `render={(props) => <MyComponent {...props} />}` with `element={<MyComponent />}`.

Error: Invariant failed: [Routes] is not a <Route> component. All children of <Routes> must be a <Route> or <React.Fragment>

Placing non-Route components directly inside `<Routes>` or using `Switch` instead of `Routes` in a v6+ environment.

fix

Ensure all direct children of `<Routes>` are `<Route>` components or fragments containing them. If upgrading from v5, replace `<Switch>` with `<Routes>`.

Upgrade

Version history

7.14.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React applications.

react-domrequiredPeer dependency for rendering React components to the DOM.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

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

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

homepagehttps://reactrouter.com ↗