React Router DOM

Common errors

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

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

  cause 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')

  cause 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`.

Warnings

• breaking For 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`.
• deprecated The `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.
• 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`.
• gotcha This 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.

Install

• npm install react-router-dom npm
• yarn add react-router-dom yarn
• pnpm add react-router-dom pnpm

Imports

• BrowserRouter
  wrong:

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

  correct:

  import { BrowserRouter } from '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.

Quickstart

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