@lomray/react-route-manager
v2.0.0
Published
React route manager for react-router.
Downloads
137
Maintainers
Readme
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.