Skip to content

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+

License

Notifications You must be signed in to change notification settings

forinda/react-router-map

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Nov 15, 2022
3b492b6 · Nov 15, 2022

History

60 Commits
Nov 8, 2022
Nov 15, 2022
Nov 7, 2022
Nov 15, 2022
Nov 7, 2022
Nov 7, 2022
Nov 7, 2022
Nov 7, 2022
Nov 7, 2022
Nov 7, 2022
Nov 10, 2022
Nov 15, 2022
Nov 7, 2022
Nov 15, 2022
Nov 15, 2022
Nov 7, 2022

Repository files navigation

react-router-map

How to use

Installation

# 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
import MapRouter from 'react-router-map'
import { IRouteProps } from 'react-router-map/dist/types' //Types of route for esm modules

const Child1 = () => <div>Child 1</div>
const Child2 = () => <div>Child 2</div>
const Parent1 = () => <div>Child 2</div>
const Parent1 = () => <div>Child 2</div>
const routes: IRouteProps[] = [
  {
    pathName: 'Home',
    urlPath: '/',
    Component: <Parent1 />,
  },
  {
    pathName: 'Admin',
    urlPath: '/admin',
    Component: <Parent2 />,
    nestedComponents: [
      {
        pathName: 'Dashboard',
        urlPath: '/admin',
        Component: <Child1 />,
      },
      {
        pathName: 'Users',
        urlPath: '/admin/users',
        Component: <Child2 />,
      },
    ],
  },
]
const Comp = () => (
  <div>
    <MapRouter routes={routes} topScroll browserRouter />
  </div>
)

If you are using a layout component for your app that runs acrosss all components then you can just plug it in

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 (
    <LayoutContainer>
      <Component />
    </LayoutContainer>
  )
}
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 = () => <MapRouter routes={routes} topScroll />

For versions <=1.0.0

import { MapRouter } from 'react-router-map'
import { IRouteProps } from 'react-router-map/dist/types' //Types of route for esm modules

const Child1 = () => <div>Child 1</div>
const Child2 = () => <div>Child 2</div>
const Parent1 = () => <div>Child 2</div>
const Parent1 = () => <div>Child 2</div>
const routes: IRouteProps[] = [
  {
    pathName: 'Home',
    urlPath: '/',
    Component: <Parent1 />,
    hasChildren: false,
  },
  {
    pathName: 'Admin',
    urlPath: '/admin',
    Component: <Parent2 />,
    hasChildren: true,
    nestedComponents: [
      {
        pathName: 'Dashboard',
        urlPath: '/admin',
        Component: <Child1 />,
        hasChildren: false,
      },
      {
        pathName: 'Users',
        urlPath: '/admin/users',
        Component: <Child2 />,
        hasChildren: false,
      },
    ],
  },
]
const Comp = () => (
  <div>
    <MapRouter routes={routes} enableTopScroll={false} browserRouter={false} />
  </div>
)

Sample layout structure

- Hompage # Hopepage render Parent 1
- admin # The component wrapper where you pass your <Outlet/>
  - Dashboard # Render dashboard
  - Users # Render users
  - Sumary # Render Dashboard summary

Sample Dashboard component

const Admin = () => (
  <div>
    <div>
      <h1>Dashboard</h1>
    </div>
    <div>
      <Outlet />
    </div>
  </div>
)

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 Dashboard layout

About

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+

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published