{"library":"react-router-dom-v5-compat","title":"React Router v5 Compatibility Layer","description":"The `react-router-dom-v5-compat` package provides a migration path for applications transitioning from React Router v4 or v5 to v6. It offers compatibility components and hooks that allow developers to run existing v5 routing logic within a v6 application environment. This enables incremental upgrades, avoiding a \"big bang\" rewrite. The package's current stable version is 6.30.3, aligning with the `react-router@6.x` series. While the core `react-router` project has progressed to v7, this compatibility layer remains focused on facilitating the v5-to-v6 migration. Its primary differentiator is enabling the co-existence of v5 and v6 routing paradigms, providing a temporary bridge rather than a permanent solution.","language":"javascript","status":"maintenance","last_verified":"Tue Apr 21","install":{"commands":["npm install react-router-dom-v5-compat"],"cli":null},"imports":["import { BrowserRouter as CompatRouter } from 'react-router-dom-v5-compat';","import { Switch as CompatSwitch } from 'react-router-dom-v5-compat';","import { useHistory as useCompatHistory } from 'react-router-dom-v5-compat';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';\nimport { BrowserRouter as CompatRouter, Switch as CompatSwitch, useHistory as useCompatHistory } from 'react-router-dom-v5-compat';\n\n// A v5-style component\nfunction OldHomePage() {\n  const history = useCompatHistory();\n  const handleClick = () => {\n    history.push('/old-about');\n  };\n  return (\n    <div>\n      <h2>Old Home Page (v5 compat)</h2>\n      <button onClick={handleClick}>Go to Old About</button>\n      <Link to=\"/v6-dashboard\">Go to v6 Dashboard</Link>\n    </div>\n  );\n}\n\n// Another v5-style component\nfunction OldAboutPage() {\n  return <h2>Old About Page (v5 compat)</h2>;\n}\n\n// A v6-style component\nfunction V6Dashboard() {\n  return <h2>V6 Dashboard</h2>;\n}\n\nfunction App() {\n  return (\n    <Router>\n      <h1>Mixed React Router App</h1>\n      <Routes>\n        {/* v6 routes */}\n        <Route path=\"/v6-dashboard\" element={<V6Dashboard />} />\n        <Route path=\"/\" element={\n          <CompatRouter>\n            {/* v5 compatibility routes inside CompatRouter */}\n            <CompatSwitch>\n              <CompatRoute path=\"/old-about\" component={OldAboutPage} />\n              <CompatRoute path=\"/\" component={OldHomePage} />\n            </CompatSwitch>\n          </CompatRouter>\n        } />\n      </Routes>\n    </Router>\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);","lang":"typescript","description":"Demonstrates how to integrate v5-style components and hooks using `react-router-dom-v5-compat` within a v6 `react-router-dom` application, allowing for a phased migration.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}