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

Stackblitz live

In the mean time we can inject a wrapper in the route Component property

Supports nested layouts