This code and routing pattern is used on most of my personal projects and would probably meet most of the routingrequirement for any other react application, but beware and use it at your own risk.
// src/routes.tsximport{RoutesConfig}from'@nichitaa/auth-react-router';import{Outlet}from'react-router-dom';import{lazy}from'react';/** * using normal `imports` or `lazy` */importPageAfrom'../pages/LoginPage.tsx';constLazyPageB=lazy(()=>import('../pages/PageB'));constLazyPageC=lazy(()=>import('../pages/PageC'));constLazyPageD=lazy(()=>import('../pages/PageD'));/** * optionally define roles (if you want to use RBAC functionality) */exportconstroles={ADMIN:'ADMIN',OPERATION:'OPERATION',MANAGER:'MANAGER',REGULAR:'REGULAR',}asconst;/** routes definition */exportconstroutes:RoutesConfig={/** * globally configured fallbacks (can be configured at route level too) */fallback:{/** * if user is on private route and has `authorized: false`, then he probably should be redirectied to a public route * and vice-versa, if those route fallbacks are not provided, default one is first common route (common[0].path) */privateRoute:'/b',publicRoute:'/c',InvalidRoles:route=><GlobalInvalidRoute{...route}/>,Suspense:<>...loading page...</>,},/** * common routes (accessible by all users) */common:[{path:'/',element:<>Route available for all users</>,},{path:'*',element:<p>PAGE NOT FOUND 404</p>,},],/** * public paths (accessible only by users with `authorized: false`) */public:[{path:'/b',// with <Outlet/>element:<><CustomLayout><Outlet/></CustomLayout></>,// nested routesroutes:[{index:true,element:<LazyPageB/>,},{path:':id',element:<LazyPageC/>,},],},],/** * private paths (accessible only by users with `authorized: true`) */private:[{path:'/c',element:<>Private page protected by all roles</>,roles:[roles.ADMIN,roles.MANAGER],allRolesRequired:true,},{path:'/c',element:<>Private page protected by at least one role</>,roles:[roles.OPERATION,roles.MANAGER],},{path:'/d',element:<LazyPageD/>,roles:[roles.OPERATION,roles.MANAGER],// Private route with its own fallbacksfallback:{Suspense:<>...loading page for private route /d...</>,InvalidRoles:(route)=><>:( could not access route /d</>,/** * fallback route if unauthroized user tryies to access `/d` route, * usually you'd want to redirect him to a public/common page (a page that he has access to) */route:'/b',},},],};import{AuthReactRouter,RoutesRoot}from'@nichitaa/auth-react-router';import{BrowserRouter}from'react-router-dom';import{routes,roles}from'./routes';exportconstApp=()=>{const{ isAuthorized, userRoles}=useAuthProvider();return(<BrowserRouter><AppRouterauthorized={isAuthorized}routes={routes}roles={userRoles}><RoutesRoot/></AppRouter></BrowserRouter>);};