Awesome

React route manager for react-router

Define and manage application url's in one place.

Getting started

The package is distributed using npm, the node package manager.

npm i --save @lomray/react-route-manager

Usage

import { Manager } from '@lomray/react-route-manager';
import type { RouteObject } from 'react-router';

/**
 * Application URL manager
 */
const manager = new Manager({
  routes: {
    home: {
      url: '/',
    },
    details: {
      url: '/details',
      children: {
        user: {
          url: '/user/:id',
          params: { id: '' }, // id required param
        },
      },
    },
    about: {
      url: '/about',
    },
  },
});


/**
 * Now we can use it for get routes path for react-router
 */
const routes: RouteObject[] = [
  {
    path: manager.path('home'),
    lazy: () => import('@pages/home'),
  },
  {
    path: manager.path('details'),
    children: [
      {
        index: true,
        lazy: () => import('@pages/details'),
      },
      {
        path: manager.path('details.user'),
        lazy: () => import('@pages/details/user'),
      },
    ],
  },
  {
    path: manager.path('about'),
    lazy: () => import('@pages/about'),
  },
];


/**
 * Also we can use it for generate url's
 */
const MyComponent = () => {
  return (
    <>
      <Link to{manager.makeURL('home')}>Home page</Link>
      <Link to{manager.makeURL('about')}>About page</Link>
      <Link to{manager.makeURL('details')}>Details page</Link>
      <Link to{manager.makeURL('details.user', { id: 1 })}>User page</Link>
    </>
  )
}

Route params

const manager = new Manager({
  routes: {
    user: {
      url: '/user',
      params: {
          // required string
          id: '',
          // required union
          id: '' as 'aaa' | 'dddd',
          // required enum
          id: DD,
          // optional string
          id: undefined,
          // optional union
          id: undefined as 'aaa' | 'dddd' | undefined,
          // optional enum
          id: undefined as DD | undefined
      }
    }
  }
});

Explore demo app to more understand.

Bugs and feature requests

Bug or a feature request, please open a new issue.

License

Made with 💚

Published under MIT License.