Registry / web-framework / react-router-routes

react-router-routes

library1.0.4jsnpmunverified

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.

web-framework

npm install react-router-routes

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-ROUTER-ROUTE

react-router-routes

web-frameworkjavascriptv1.0.4

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

matchRoutes

✓ import { matchRoutes } from 'react-router-config'

✗ import { matchRoutes } from 'react-router-routes'

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'.

renderRoutes

✓ import { renderRoutes } from 'react-router-config'

✗ import renderRoutes from 'react-router-config'

renderRoutes is a named export, not a default export.

renderRoutes (multiple levels)

✓ import { renderRoutes } from 'react-router-config'; \nrenderRoutes(routes[0].routes)

renderRoutes accepts an array of route config objects, typically the nested 'routes' property of a parent route.

Demonstrates static route config with renderRoutes and matchRoutes, including nested routes and server-side matching.

import React from 'react'; import { BrowserRouter } from 'react-router-dom'; import { renderRoutes, matchRoutes } from 'react-router-config'; import { render } from 'react-dom'; const routes = [ { component: ({ route }) => ( <div> <h1>Root</h1> {renderRoutes(route.routes)} </div> ), routes: [ { path: '/', exact: true, component: () => <h2>Home</h2> }, { path: '/child/:id', component: ({ match }) => <h2>Child: {match.params.id}</h2> } ] } ]; function App() { return ( <BrowserRouter> {renderRoutes(routes)} </BrowserRouter> ); } // Server-side: preload data using matchRoutes const branch = matchRoutes(routes, '/child/42'); console.log('Matched branch:', branch); render(<App />, document.getElementById('root'));

Debug

Known issues

gotchaThe 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.

fix

Install 'react-router-config' and import from it, or use the original 'react-router-config' package instead.

affects: >=1.0.0

deprecatedReact Router v6 does not support this route configuration approach. Use React Router v6's native route objects or 'useRoutes' hook instead.

fix

Upgrade to React Router v6 and replace with 'createRoutesFromElements' or use the 'useRoutes' hook with a route config array.

affects: >=1.0.0

gotchaThe package is alpha software with no realistic server rendering example; data preloading is not fully demonstrated.

fix

Implement your own data preloading logic using matchRoutes and component lifecycle, or consider using a more mature solution.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot find module 'react-router-config' from 'src/App.js'

Using the package 'react-router-routes' but importing from 'react-router-config' without installing it.

fix

Run: npm install react-router-config

Uncaught TypeError: (0 , _reactRouterConfig.renderRoutes) is not a function

Importing renderRoutes as a default export instead of named export.

fix

Change import: import { renderRoutes } from 'react-router-config'

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function but got: undefined

Route component is undefined because the route config does not have a 'component' property, or the import is missing.

fix

Ensure each route object has a valid 'component' property that is a React component.

Upgrade

Version history

1.0.4latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/jharris4/react-router-routes ↗

packagehttps://www.npmjs.com/package/react-router-routes ↗