{"id":14878,"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.","status":"abandoned","version":"5.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/ReactTraining/react-router","tags":["javascript","react","router","route","routing","static routes","route config","react router"],"install":[{"cmd":"npm install react-router-config","lang":"bash","label":"npm"},{"cmd":"yarn add react-router-config","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-router-config","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for rendering React components.","package":"react","optional":false},{"reason":"Core peer dependency for React Router v5 functionality, as this package extends its routing capabilities.","package":"react-router","optional":false},{"reason":"Typically used in browser environments alongside react-router to provide DOM-specific bindings like BrowserRouter.","package":"react-router-dom","optional":true}],"imports":[{"note":"ESM is preferred. CommonJS `require` syntax is older and often problematic in modern React builds.","wrong":"const matchRoutes = require('react-router-config').matchRoutes;","symbol":"matchRoutes","correct":"import { matchRoutes } from 'react-router-config';"},{"note":"ESM is preferred. This function is essential for rendering the route components based on the static config.","wrong":"const renderRoutes = require('react-router-config').renderRoutes;","symbol":"renderRoutes","correct":"import { renderRoutes } from 'react-router-config';"},{"note":"For browser-only usage without a module bundler, the UMD build exposes functionality via `window.ReactRouterConfig`.","symbol":"UMD Global","correct":"<script src=\"https://unpkg.com/react-router-config/umd/react-router-config.min.js\"></script>\nwindow.ReactRouterConfig.matchRoutes;"}],"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."},"warnings":[{"fix":"Migrate to `react-router-dom` v6+ and use the built-in `useRoutes` hook or `<Routes>` component. A codemod is available to help with this transition.","message":"`react-router-config` is incompatible with React Router v6 (and later v7) due to fundamental API changes. React Router v6 introduced the `useRoutes` hook and object-based routing directly into its core, deprecating the need for this separate package entirely.","severity":"breaking","affected_versions":">=6.0.0 (for react-router)"},{"fix":"Avoid using this package for new projects. For existing projects, plan a migration to `react-router-dom` v6 or later to leverage current features and community support.","message":"This package is effectively abandoned and unmaintained. Its last version (5.1.1) was published in 2019, predating the significant architectural shifts in React Router v6 and v7.","severity":"deprecated","affected_versions":"All versions"},{"fix":"Exercise caution and thoroughly test any advanced use cases. Prefer native `react-router` solutions for robust behavior.","message":"The README explicitly states this is \"alpha software\" and needs more realistic examples for server rendering and pending navigation, indicating it might not be fully production-ready even for its target React Router v4/v5 versions.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Ensure all route definitions use the `component` prop. For logic that would typically be in `render` or `children`, wrap the component in a higher-order component or use composition.","message":"Route objects in `react-router-config` only accept the `component` prop for rendering; `render` or `children` render props, which are available in `<Route>` components of React Router v4/v5, are not supported.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Always wrap the component that calls `renderRoutes` (or your entire app) with an appropriate `Router` component from `react-router-dom`.","message":"The `renderRoutes` function expects to be within a `React Router` context (e.g., `<BrowserRouter>`, `<StaticRouter>`). Calling it outside this context will result in an error.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade to React Router v6+ and refactor your routing logic to use the `useRoutes` hook or the `<Routes>` component, which supports object-based route configuration natively.","cause":"Attempting to use `react-router-config` (designed for v5) with React Router v6 or later. The underlying route object structure and APIs have changed significantly, making `matchRoutes` and `renderRoutes` unable to parse the new route definitions.","error":"TypeError: Cannot read properties of undefined (reading 'routes')"},{"fix":"Ensure that the component calling `renderRoutes` is always rendered within a `BrowserRouter`, `HashRouter`, or `StaticRouter` from `react-router-dom`.","cause":"The `renderRoutes` function, like other React Router components, relies on context provided by a parent `<Router>` component (e.g., `BrowserRouter`, `HashRouter`, `StaticRouter`). If `renderRoutes` is called without being a descendant of such a router, this error occurs.","error":"Error: Invariant failed: You should not use <renderRoutes> outside a <Router>"},{"fix":"Verify that your import statement matches your module system (e.g., `import { renderRoutes } from 'react-router-config';` for ESM, or `const { renderRoutes } = require('react-router-config');` for CommonJS).","cause":"This usually indicates an incorrect import statement, such as attempting to use CommonJS `require` in an ESM module context, or vice-versa, or an incorrect destructuring of the import.","error":"ReferenceError: renderRoutes is not defined"}],"ecosystem":"npm"}