https://github.com/iamogbz/react-router-chart

🗺️ Static route mapping for React Router
https://github.com/iamogbz/react-router-chart

es6 javascript nodejs react react-router react-router-config

Last synced: about 2 months ago
JSON representation

🗺️ Static route mapping for React Router

• Host: GitHub
• URL: https://github.com/iamogbz/react-router-chart
• Owner: iamogbz
• License: unlicense
• Created: 2018-07-20T17:09:00.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-04-30T11:09:03.000Z (8 months ago)
• Last Synced: 2024-05-02T01:37:18.494Z (8 months ago)
• Topics: es6, javascript, nodejs, react, react-router, react-router-config
• Language: TypeScript
• Homepage: https://ogbizi.com/react-router-chart/
• Size: 61.4 MB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# React Router Chart

Define your routes only once and reference for use everywhere.

[![NPM Version](https://img.shields.io/npm/v/react-router-chart.svg)](https://www.npmjs.com/package/react-router-chart)

[![Build Status](https://github.com/iamogbz/react-router-chart/workflows/Build/badge.svg)](https://github.com/iamogbz/react-router-chart/actions?query=workflow%3ABuild)

[![Coverage Status](https://coveralls.io/repos/github/iamogbz/react-router-chart/badge.svg?branch=main&cache=0)](https://coveralls.io/github/iamogbz/react-router-chart?branch=main)

[![Dependabot badge](https://badgen.net/github/dependabot/iamogbz/react-router-chart/?icon=dependabot)](https://app.dependabot.com)

[![Dependencies](https://img.shields.io/librariesio/github/iamogbz/react-router-chart)](https://libraries.io/github/iamogbz/react-router-chart)

[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/iamogbz/react-router-chart)

## Getting Started

### Install

Include in your dependencies.

```sh

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](https://reactjs.org/docs/code-splitting.html#reactlazy)

## Usage

### React Router

You should understand what [`react-router`](https://reactrouter.com/en/main/routers/picking-a-router) provides out of the box.

The [`react-router/Route`](https://reactrouter.com/en/main/route/route) supports nesting

but does not provide an easy way to reference existing nested routes.

This is where [`Chart.describe`](#chartdescribe) is useful.

### `Chart.describe`

```js

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: ,

    loader: rootLoader,

    children: [

      {

        path: "team",

        element: ,

        loader: teamLoader,

      },

    ],

  },

]

// Generate named route paths

export const paths = Chart.describe(routeConfigs);

export const router = createBrowserRouter(routeConfigs);

ReactDOM.createRoot(document.getElementById("root")).render(

  

);

```

Easily access any location path by name

```js

paths.$; // "/" - root

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

```

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