React Router Chart

Define your routes only once and reference for use everywhere.

Getting Started

Install

Include in your dependencies.

npm install 'react-router-chart'

Recommended

Use React.lazy and React.Suspense to separate component logic from route mapping, by deferring the load of the component to the time of render.

See more

Usage

React Router

You should understand what react-router provides out of the box.

The react-router/Route supports nesting but does not provide an easy way to reference existing nested routes.

This is where Chart.describe is useful.

Chart.describe

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import { Chart } from 'react-router-chart`;
import Root, { rootLoader } from "./routes/root";
import Team, { teamLoader } from "./routes/team";

// Given a react router route config
const routeConfigs = [
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]

// Generate named route paths
export const paths = Chart.describe(routeConfigs);

export const router = createBrowserRouter(routeConfigs);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

Easily access any location path by name

paths.$; // "/" - root
paths.team.$; // "/team" - team

Can be reference for link creation in other parts of the app.