{"library":"react-router-config","title":"React Router Config Helpers","description":"`react-router-config` is a utility package designed to provide static route configuration helpers, primarily for applications using React Router v4 and v5. It allows developers to define their application's routing structure as a centralized array of route objects, which is particularly useful for scenarios such as server-side data preloading, static analysis of routes, and programmatically linking to routes. The package offers two main functions: `matchRoutes` to identify matching routes for a given URL pathname, and `renderRoutes` to render the corresponding React components based on the matched configuration. Currently at version 5.1.1, this package is considered superseded and effectively abandoned for modern React Router applications. React Router v6 and later versions, which are now at v7, have integrated similar declarative and programmatic routing APIs (like `useRoutes` and `createBrowserRouter`) directly into their core, making `react-router-config` largely obsolete. Its last publication was over six years ago, further cementing its status as an unmaintained library.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install react-router-config"],"cli":null},"imports":["import { matchRoutes } from 'react-router-config';","import { renderRoutes } from 'react-router-config';","<script src=\"https://unpkg.com/react-router-config/umd/react-router-config.min.js\"></script>\nwindow.ReactRouterConfig.matchRoutes;"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { BrowserRouter, Link } from 'react-router-dom'; // Requires react-router-dom v5.x or lower\nimport { matchRoutes, renderRoutes } from 'react-router-config';\n\n// Define your React components\nconst Home = () => <h2>Home Page</h2>;\nconst Child = ({ route, match }) => (\n  <div>\n    <h3>Child Component: {match.params.id}</h3>\n    <Link to={`${match.url}/grand-child`}>Go to Grand Child</Link>\n    {/* Recursively render sub-routes */}\n    {renderRoutes(route.routes, { extraProp: 'passedValue' })}\n  </div>\n);\nconst GrandChild = () => <h4>Grand Child Component</h4>;\nconst NotFound = () => <h2>404 Not Found</h2>;\n\n// Define the static route configuration\nconst routes = [\n  {\n    path: '/',\n    exact: true,\n    component: Home,\n  },\n  {\n    path: '/child/:id',\n    component: Child,\n    routes: [\n      {\n        path: '/child/:id/grand-child',\n        component: GrandChild,\n      },\n    ],\n  },\n  { // A catch-all route for unmatched paths\n    component: NotFound,\n  },\n];\n\n// Example usage: matching routes for a specific path\nconst path = '/child/123';\nconst branch = matchRoutes(routes, path);\nconsole.log(`Matched routes for ${path}:`, branch.map(b => b.route.path || b.route.component.name));\n\n// The main App component that uses renderRoutes to display the current route\nconst App = () => (\n  <BrowserRouter>\n    <nav>\n      <Link to=\"/\">Home</Link> | <Link to=\"/child/456\">Child 456</Link> |\n      <Link to=\"/child/789/grand-child\">Grand Child</Link> |\n      <Link to=\"/non-existent\">Non-Existent</Link>\n    </nav>\n    <hr />\n    {/* Renders the top-level routes and their nested structures */}\n    {renderRoutes(routes)}\n  </BrowserRouter>\n);\n\n// Render the application\nconst root = ReactDOM.createRoot(document.getElementById('root')!); \nroot.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);","lang":"typescript","description":"This example demonstrates how to define a static route configuration using an array of route objects, match a specific URL pathname against these routes using `matchRoutes`, and then render the corresponding component hierarchy using `renderRoutes` within a React Router v5 `BrowserRouter` context. It includes nested routes and passes extra props.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}