React Router Routes (fork of react-router-config)

1.0.4 verified Fri May 01 auth: no javascript

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.

Common errors

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

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

fix

Run: npm install react-router-config

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

cause Importing renderRoutes as a default export instead of named export.

fix

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

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

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

Warnings

gotcha 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. ↓

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

deprecated React 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.

gotcha The 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.

Install

npm install react-router-routes

yarn add react-router-routes

pnpm add react-router-routes

Imports

matchRoutes
wrong
```
import { matchRoutes } from 'react-router-routes'
```
correct
```
import { matchRoutes } from 'react-router-config'
```
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

wrong

import renderRoutes from 'react-router-config'

correct

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.

Quickstart

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'));