Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/forinda/react-router-map
A declarative routing library that maps your routes and uses the react-router-dom library so that you focus on the logic rather than route configuration. It supports nested routing and react-router-dom v6+
https://github.com/forinda/react-router-map
nodejs react react-router react-router-dom react-router-dom-v6 routing typescript
Last synced: 2 months ago
JSON representation
A declarative routing library that maps your routes and uses the react-router-dom library so that you focus on the logic rather than route configuration. It supports nested routing and react-router-dom v6+
- Host: GitHub
- URL: https://github.com/forinda/react-router-map
- Owner: forinda
- License: gpl-3.0
- Created: 2022-11-06T15:55:01.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-30T16:09:53.000Z (12 months ago)
- Last Synced: 2024-11-01T06:51:27.637Z (2 months ago)
- Topics: nodejs, react, react-router, react-router-dom, react-router-dom-v6, routing, typescript
- Language: JavaScript
- Homepage:
- Size: 808 KB
- Stars: 10
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: License
Awesome Lists containing this project
README
## `react-router-map`
## How to use
Installation
```sh
# Pnpm
pnpm install react-router-map
# Npm
npm install react-router-map
#Yarn
yarn add react-router-map
```
To load it in your component ensure `react-router-dom` is installed
Supports both `esm` and `commonjs`
For versions `>1.0.0`
- Removal of `hasChildren` prop and check for the children directly without the `boolean` field
- Addition of `Layout` prop and `extensible` layout structure in the routes level for more complex routing layout wrappers
```jsx
import MapRouter from 'react-router-map'
import { IRouteProps } from 'react-router-map/dist/types' //Types of route for esm modules
const Child1 = () =>
Child 1
const Child2 = () => Child 2
const Parent1 = () => Child 2
const Parent1 = () => Child 2
const routes: IRouteProps[] = [
{
pathName: 'Home',
urlPath: '/',
Component: ,
},
{
pathName: 'Admin',
urlPath: '/admin',
Component: ,
nestedComponents: [
{
pathName: 'Dashboard',
urlPath: '/admin',
Component: ,
},
{
pathName: 'Users',
urlPath: '/admin/users',
Component: ,
},
],
},
]
const Comp = () => (
)
```
If you are using a layout component for your app that runs acrosss all components then you can just plug it in
```jsx
type Lmap = (
LayoutContainer: React.FC<{
children: JSX.Element,
}>,
Component: React.FC | React.ElementType,
) => JSX.Element
const layoutWrap: Lmap = (
LayoutContainer: React.FC<{ children: JSX.Element }>,
Component: React.FC | React.ElementType,
) => {
return (
)
}
const routes: IRouteProps[] = [
{
Component: layoutWrap(BaseLayout, Homepage),
pathName: 'Home',
urlPath: '/',
},
{
Component: layoutWrap(BaseLayout, AboutPage),
pathName: 'About',
urlPath: '/about',
},
{
Component: layoutWrap(BaseLayout, ContactPage),
pathName: 'Contact',
urlPath: '/contact',
},
{
Component: layoutWrap(BaseLayout, NotFound),
pathName: 'NotFound',
urlPath: '*',
},
]
const ComponentPage = () =>
```
For versions `<=1.0.0`
```jsx
import { MapRouter } from 'react-router-map'
import { IRouteProps } from 'react-router-map/dist/types' //Types of route for esm modules
const Child1 = () =>
Child 1
const Child2 = () => Child 2
const Parent1 = () => Child 2
const Parent1 = () => Child 2
const routes: IRouteProps[] = [
{
pathName: 'Home',
urlPath: '/',
Component: ,
hasChildren: false,
},
{
pathName: 'Admin',
urlPath: '/admin',
Component: ,
hasChildren: true,
nestedComponents: [
{
pathName: 'Dashboard',
urlPath: '/admin',
Component: ,
hasChildren: false,
},
{
pathName: 'Users',
urlPath: '/admin/users',
Component: ,
hasChildren: false,
},
],
},
]
const Comp = () => (
)
```
Sample layout structure
```sh
- Hompage # Hopepage render Parent 1
- admin # The component wrapper where you pass your
- Dashboard # Render dashboard
- Users # Render users
- Sumary # Render Dashboard summary
```
Sample Dashboard component
```jsx
const Admin = () => (
Dashboard
)
```
The code above implements `HashRouter` and `BrowserRouter` for you and you just need to install the package and `react-router-dom`
Features
- Optional topscroll on page navigation
- Enable BrowserRouter or disable( Defaults to `HashRouter`)
- Nested layouts (You just have to to supply any level of nesting in your Application in the `nestedComponents` property)
Upcoming features
- Layout support
# Try it out on Stackblitz
In the mean time we can inject a wrapper in the route `Component` property
Supports nested layouts
