React Router Config Helpers

5.1.1 · abandoned · verified Sun Apr 19

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

Common errors

Warnings

Install

Imports

Quickstart

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.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Link } from 'react-router-dom'; // Requires react-router-dom v5.x or lower
import { matchRoutes, renderRoutes } from 'react-router-config';

// Define your React components
const Home = () => <h2>Home Page</h2>;
const Child = ({ route, match }) => (
  <div>
    <h3>Child Component: {match.params.id}</h3>
    <Link to={`${match.url}/grand-child`}>Go to Grand Child</Link>
    {/* Recursively render sub-routes */}
    {renderRoutes(route.routes, { extraProp: 'passedValue' })}
  </div>
);
const GrandChild = () => <h4>Grand Child Component</h4>;
const NotFound = () => <h2>404 Not Found</h2>;

// Define the static route configuration
const routes = [
  {
    path: '/',
    exact: true,
    component: Home,
  },
  {
    path: '/child/:id',
    component: Child,
    routes: [
      {
        path: '/child/:id/grand-child',
        component: GrandChild,
      },
    ],
  },
  { // A catch-all route for unmatched paths
    component: NotFound,
  },
];

// Example usage: matching routes for a specific path
const path = '/child/123';
const branch = matchRoutes(routes, path);
console.log(`Matched routes for ${path}:`, branch.map(b => b.route.path || b.route.component.name));

// The main App component that uses renderRoutes to display the current route
const App = () => (
  <BrowserRouter>
    <nav>
      <Link to="/">Home</Link> | <Link to="/child/456">Child 456</Link> |
      <Link to="/child/789/grand-child">Grand Child</Link> |
      <Link to="/non-existent">Non-Existent</Link>
    </nav>
    <hr />
    {/* Renders the top-level routes and their nested structures */}
    {renderRoutes(routes)}
  </BrowserRouter>
);

// Render the application
const root = ReactDOM.createRoot(document.getElementById('root')!); 
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

view raw JSON →