{"id":14879,"library":"react-router-dom","title":"React Router DOM","description":"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.","status":"deprecated","version":"7.14.1","language":"javascript","source_language":"en","source_url":"https://github.com/remix-run/react-router","tags":["javascript","react","router","route","routing","history","link","typescript"],"install":[{"cmd":"npm install react-router-dom","lang":"bash","label":"npm"},{"cmd":"yarn add react-router-dom","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-router-dom","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"const BrowserRouter = require('react-router-dom')","symbol":"BrowserRouter","correct":"import { BrowserRouter } from 'react-router-dom'"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { BrowserRouter, Routes, Route, Link } from 'react-router-dom';\n\nfunction App() {\n  return (\n    <div>\n      <nav>\n        <Link to=\"/\">Home</Link> | <Link to=\"/about\">About</Link>\n      </nav>\n      <Routes>\n        <Route path=\"/\" element={<Home />} />\n        <Route path=\"/about\" element={<About />} />\n        <Route path=\"*\" element={<NoMatch />} />\n      </Routes>\n    </div>\n  );\n}\n\nfunction Home() {\n  return <h2>Home</h2>;\n}\n\nfunction About() {\n  return <h2>About</h2>;\n}\n\nfunction NoMatch() {\n  return <h3>Nothing to see here!</h3>;\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);","lang":"typescript","description":"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`."},"warnings":[{"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`.","message":"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`.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Follow the migration guide for React Router v7 and import directly from `react-router`. Remove `react-router-dom` from your project dependencies.","message":"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.","severity":"deprecated","affected_versions":">=7.0.0"},{"fix":"Ensure `react` and `react-dom` are installed at version `>=18` in your project's `package.json`.","message":"`react-router-dom` requires React 18 or newer as a peer dependency, meaning your project must use React version 18 or higher.","severity":"gotcha","affected_versions":">=7.0.0"},{"fix":"Upgrade your Node.js environment to version `20.0.0` or later.","message":"This package requires Node.js version 20.0.0 or higher. Older Node.js versions may lead to build errors or runtime issues.","severity":"gotcha","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-18T00:00:00.000Z","next_check":"2026-07-17T00:00:00.000Z","problems":[{"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`.","cause":"The `react-router-dom` package is missing from your project's dependencies or was prematurely removed after a v7 migration.","error":"Module not found: Error: Can't resolve 'react-router-dom'"},{"fix":"Wrap your application's root component or the section using routing components with `<BrowserRouter>`. For example: `<BrowserRouter><App/></BrowserRouter>`.","cause":"React Router hooks like `useRoutes` (or components like `Routes` and `Route`) are used outside of a `BrowserRouter` (or other router) component.","error":"Error: useRoutes() may be used only in the context of a <Router> component."},{"fix":"Upgrade `react` and `react-dom` in your `package.json` to version `18.0.0` or higher: `npm install react@^18 react-dom@^18`.","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.","error":"TypeError: Cannot read properties of undefined (reading 'Provider')"}],"ecosystem":"npm"}