{"id":27335,"library":"react-router-routes","title":"React Router Routes (fork of react-router-config)","description":"A static route configuration library for React Router v4/v5, forked from react-router-config. Provides helpers like matchRoutes and renderRoutes to define routes declaratively as an array of objects, enabling server-side data preloading and static analysis. Currently at v1.0.4 (alpha), with peer dependencies on React >=15 and React Router >=5. Key differentiators vs react-router-config: same API but maintained separately, with added support for redirect and forcedProps keys. Note: the README instructs users to replace react-router-config references with react-router-routes; this is alpha software lacking realistic server rendering examples.","status":"active","version":"1.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/jharris4/react-router-routes","tags":["javascript","react","router","route","routing","static routes","route config","react router"],"install":[{"cmd":"npm install react-router-routes","lang":"bash","label":"npm"},{"cmd":"yarn add react-router-routes","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-router-routes","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The package's README explicitly says to use react-router-config imports. Do NOT import from 'react-router-routes'—it is a fork that re-exports the same API from 'react-router-config'.","wrong":"import { matchRoutes } from 'react-router-routes'","symbol":"matchRoutes","correct":"import { matchRoutes } from 'react-router-config'"},{"note":"renderRoutes is a named export, not a default export.","wrong":"import renderRoutes from 'react-router-config'","symbol":"renderRoutes","correct":"import { renderRoutes } from 'react-router-config'"},{"note":"renderRoutes accepts an array of route config objects, typically the nested 'routes' property of a parent route.","wrong":null,"symbol":"renderRoutes (multiple levels)","correct":"import { renderRoutes } from 'react-router-config'; \\nrenderRoutes(routes[0].routes)"}],"quickstart":{"code":"import React from 'react';\nimport { BrowserRouter } from 'react-router-dom';\nimport { renderRoutes, matchRoutes } from 'react-router-config';\nimport { render } from 'react-dom';\n\nconst routes = [\n  {\n    component: ({ route }) => (\n      <div>\n        <h1>Root</h1>\n        {renderRoutes(route.routes)}\n      </div>\n    ),\n    routes: [\n      {\n        path: '/',\n        exact: true,\n        component: () => <h2>Home</h2>\n      },\n      {\n        path: '/child/:id',\n        component: ({ match }) => <h2>Child: {match.params.id}</h2>\n      }\n    ]\n  }\n];\n\nfunction App() {\n  return (\n    <BrowserRouter>\n      {renderRoutes(routes)}\n    </BrowserRouter>\n  );\n}\n\n// Server-side: preload data using matchRoutes\nconst branch = matchRoutes(routes, '/child/42');\nconsole.log('Matched branch:', branch);\n\nrender(<App />, document.getElementById('root'));","lang":"javascript","description":"Demonstrates static route config with renderRoutes and matchRoutes, including nested routes and server-side matching."},"warnings":[{"fix":"Install 'react-router-config' and import from it, or use the original 'react-router-config' package instead.","message":"The npm package 'react-router-routes' is a fork and the README instructs to import from 'react-router-config', not 'react-router-routes'. Using wrong imports will cause build errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to React Router v6 and replace with 'createRoutesFromElements' or use the 'useRoutes' hook with a route config array.","message":"React Router v6 does not support this route configuration approach. Use React Router v6's native route objects or 'useRoutes' hook instead.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Implement your own data preloading logic using matchRoutes and component lifecycle, or consider using a more mature solution.","message":"The package is alpha software with no realistic server rendering example; data preloading is not fully demonstrated.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run: npm install react-router-config","cause":"Using the package 'react-router-routes' but importing from 'react-router-config' without installing it.","error":"Cannot find module 'react-router-config' from 'src/App.js'"},{"fix":"Change import: import { renderRoutes } from 'react-router-config'","cause":"Importing renderRoutes as a default export instead of named export.","error":"Uncaught TypeError: (0 , _reactRouterConfig.renderRoutes) is not a function"},{"fix":"Ensure each route object has a valid 'component' property that is a React component.","cause":"Route component is undefined because the route config does not have a 'component' property, or the import is missing.","error":"Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function but got: undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}