{"library":"react-router","title":"React Router","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-router"],"cli":null},"imports":["import { BrowserRouter } from 'react-router-dom';","import { Routes, Route } from 'react-router-dom';","import { useNavigate } from 'react-router-dom';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { BrowserRouter, Routes, Route, Link, Outlet, useParams } from 'react-router-dom';\n\nconst Home = () => <h2>Home</h2>;\nconst About = () => <h2>About</h2>;\nconst Dashboard = () => (\n  <div>\n    <h2>Dashboard</h2>\n    <nav>\n      <Link to=\"./invoices\">Invoices</Link> |{' '}\n      <Link to=\"./team\">Team</Link>\n    </nav>\n    <Outlet />\n  </div>\n);\n\nconst Invoices = () => <h3>Invoices Section</h3>;\nconst Team = () => <h3>Team Section</h3>;\n\nconst UserProfile = () => {\n  const { id } = useParams();\n  return <h3>User ID: {id}</h3>;\n};\n\nfunction App() {\n  return (\n    <BrowserRouter>\n      <nav>\n        <Link to=\"/\">Home</Link> |{' '}\n        <Link to=\"/about\">About</Link> |{' '}\n        <Link to=\"/dashboard\">Dashboard</Link> |{' '}\n        <Link to=\"/users/123\">User 123</Link>\n      </nav>\n\n      <Routes>\n        <Route path=\"/\" element={<Home />} />\n        <Route path=\"/about\" element={<About />} />\n        <Route path=\"/dashboard\" element={<Dashboard />}>\n          <Route path=\"invoices\" element={<Invoices />} />\n          <Route path=\"team\" element={<Team />} />\n          <Route index element={<div>Select an item</div>} />\n        </Route>\n        <Route path=\"/users/:id\" element={<UserProfile />} />\n        <Route path=\"*\" element={<h2>Not Found</h2>} />\n      </Routes>\n    </BrowserRouter>\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);","lang":"typescript","description":"This quickstart demonstrates basic routing with `BrowserRouter`, nested routes with `Outlet`, dynamic parameters with `useParams`, and navigation with `Link` in a typical React application.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}