Usage

npm i react-rolebased-router

yarn add react-rolebased-router

Here is a quick example to get you started, it's all you need:

import * as React from 'react';
import ReactDOM from 'react-dom';

import { BrowserRouter } from "react-router-dom";
import ReactRoleAccessRouter from "react-rolebased-router";
import { RouterConfig } from "react-rolebased-router/lib/types";

const routes: RouterConfig[] = [
  {
    path: "/",
    exact: true,
    redirect: [
      {
        page: "/dashboard",
        permissions: ["admin"],
      }
    ],
    exact: true,
    fallback: <div>Loading...</div>,
  },
  {
    path: "/home",
    component: lazy(() => import("./pages/Home")),
    exact: true,
    fallback: <div>Loading...</div>,
    private: true,
    permissions: ["super-admin", "admin"]
  },
  ...
  {
    path: "/*",
    component: lazy(() => import("./pages/NotFound")),
    exact: false,
    fallback: <div>Loading...</div>,
    routeParam: {
      title: "Page Not Found",
      component: <h1>Test Parameter</h1>
    }
  },
  {
    path: "/*",
    component: lazy(() => import("./pages/NotFound")),
    exact: false,
    fallback: <div>Loading...</div>,
    routes: [
      {
        path: "/*",
        component: lazy(() => import("./pages/NotFound")),
        exact: false,
        fallback: <div>Loading...</div>,
      },
    ]
  },
]

const App = () => {
  return (
    </BrowserRouter>
      <ReactRoleAccessRouter
        routes={routes}
        userAuthRoles={userRoles}
        loginRedirectPath={"/login"}
        isUserAuthenticated={loggedIn}
      />
    </BrowserRouter>
  )
}

ReactDOM.render(<App />, document.querySelector('#app'));

See Demo:

🤔 Wana make it awesome, contribute, create an issue and more are welcome.