{"id":10413,"library":"react-router","title":"React Router","description":"React Router is the core library for declarative routing in React applications, providing the foundational hooks and utilities for navigation and state management. The current stable version is 7.14.1, with frequent point releases reflecting active development and maintenance.","status":"active","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","lang":"bash","label":"npm"},{"cmd":"yarn add react-router","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-router","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"symbol":"RouterProvider","correct":"import { RouterProvider } from 'react-router'"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport {\n  createBrowserRouter,\n  RouterProvider,\n  Outlet,\n  Link,\n  useNavigate\n} from 'react-router';\n\nfunction Layout() {\n  const navigate = useNavigate();\n  return (\n    <div>\n      <h1>React Router Example</h1>\n      <nav>\n        <Link to=\"/\">Home</Link> | <Link to=\"/about\">About</Link>\n      </nav>\n      <hr />\n      <Outlet /> {/* Renders the current route's element */}\n      <button onClick={() => navigate('/contact')}>Go to Contact</button>\n    </div>\n  );\n}\n\nfunction HomePage() {\n  return <h2>Welcome to the Home Page!</h2>;\n}\n\nfunction AboutPage() {\n  return <h2>Learn more about us!</h2>;\n}\n\nfunction ContactPage() {\n  return <h2>Get in touch!</h2>;\n}\n\nconst router = createBrowserRouter([\n  {\n    path: '/',\n    element: <Layout />,\n    children: [\n      {\n        index: true,\n        element: <HomePage />,\n      },\n      {\n        path: 'about',\n        element: <AboutPage />,\n      },\n      {\n        path: 'contact',\n        element: <ContactPage />,\n      },\n    ],\n  },\n]);\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n  <React.StrictMode>\n    <RouterProvider router={router} />\n  </React.StrictMode>\n);","lang":"typescript","description":"This quickstart demonstrates how to set up a basic data router with `createBrowserRouter` and `RouterProvider`, defining nested routes and using `Link` for declarative navigation and `useNavigate` for programmatic navigation within a React application."},"warnings":[{"fix":"Review the official migration guide for moving from v6 to v7. Refactor routing configuration to use `createBrowserRouter` and adopt data APIs as needed.","message":"React Router v7 introduced significant changes, primarily with the data APIs (loaders, actions) and the recommended `createBrowserRouter` and `RouterProvider` setup.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Ensure your project's `react` and `react-dom` packages are updated to version 18 or higher.","message":"React Router v7 requires React and React DOM v18 or newer as peer dependencies.","severity":"gotcha","affected_versions":">=7.0.0"},{"fix":"For web applications, prefer `npm i react-router-dom` and import `BrowserRouter` or `createBrowserRouter` from `react-router-dom`. The `react-router` package primarily exports hooks and data APIs shared across platforms.","message":"The `react-router` package is the core, but for browser-based applications, you typically install and use `react-router-dom` which exports browser-specific components like `BrowserRouter`.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure your Node.js environment meets the minimum requirement of version 20.0.0 or higher.","message":"The package specifies a Node.js engine requirement.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-18T00:00:00.000Z","next_check":"2026-07-17T00:00:00.000Z","problems":[{"fix":"Verify your `createBrowserRouter` configuration to ensure that a route exists for the URL that is being accessed. Include `index: true` for default child routes or add a catch-all route.","cause":"The current URL path does not match any defined route in your router configuration.","error":"Error: No routes matched URL \"/\""},{"fix":"Wrap your root application component (or the specific components that use routing elements) with `<RouterProvider router={router} />` or `<BrowserRouter>` to provide the necessary routing context.","cause":"Routing components or hooks (e.g., `Link`, `useNavigate`) are being used in a component that is not rendered within a `RouterProvider` or `BrowserRouter` context.","error":"Error: You should not use `<Link>` outside a `Router`."},{"fix":"Ensure that all React Router hooks are called directly within the body of a React function component or a custom hook that itself follows React's rules of hooks.","cause":"React Router hooks (e.g., `useNavigate`, `useParams`, `useLocation`) are being called outside the scope of a React function component or custom hook.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Verify `import { RouterProvider } from 'react-router'` is correct and that your `react` and `react-dom` packages are both at version 18 or higher.","cause":"This error often occurs when `RouterProvider` is not correctly imported, or there's an incompatibility with React versions.","error":"TypeError: Cannot read properties of undefined (reading 'Provider')"},{"fix":"Replace `const RouterProvider = require('react-router').RouterProvider;` with `import { RouterProvider } from 'react-router';`.","cause":"Attempting to use CommonJS `require()` syntax for imports in a modern JavaScript or TypeScript project configured for ESM (ES Modules).","error":"ReferenceError: require is not defined"}],"ecosystem":"npm"}