React route manager for react-router.
npm install @lomray/react-route-managerDefine and manage application url's in one place.
The package is distributed using npm, the node package manager.
``
npm i --save @lomray/react-route-manager
`typescript jsx
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 (
<>
Home page
About page
Details page
User page
)
}
`
typescript
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.
Bug or a feature request, please open a new issue.
Published under MIT License.