aso/frontend/dashboard/src/routes/index.tsx

import { Suspense, lazy, ElementType } from 'react';
import { Navigate, useRoutes, useLocation } from 'react-router-dom';
// layouts
import DashboardLayout from '../layouts/dashboard';
import LogoOnlyLayout from '../layouts/LogoOnlyLayout';
// components
import LoadingScreen from '../components/LoadingScreen';
import GuestGuard from '../guards/GuestGuard';
import { RegisterForm } from '../sections/auth/register';
import Register from '../pages/auth/Register';
import ResetPassword from '../pages/auth/ResetPassword';
import VerifyCode from '../pages/auth/VerifyCode';
import { AuthProvider } from '../contexts/LaravelAuthContext';
import AuthGuard from '../guards/AuthGuard';

// ----------------------------------------------------------------------

const Loadable = (Component: ElementType) => (props: any) => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const { pathname } = useLocation();

  return (
    <Suspense fallback={<LoadingScreen isDashboard={pathname.includes('/dashboard')} />}>
      <Component {...props} />
    </Suspense>
  );
};

export default function Router() {
  return useRoutes([
    {
      path: 'auth',
      children: [
        {
          path: 'login',
          element: (
            <AuthProvider>
              <GuestGuard>
                <Login />
              </GuestGuard>
            </AuthProvider>
          ),
        },
        {
          path: 'register',
          element: (
            <AuthProvider>
              <GuestGuard>
                <RegisterForm />
              </GuestGuard>
            </AuthProvider>
          ),
        },
        // { path: 'login-unprotected', element: <Login /> },
        // { path: 'register-unprotected', element: <Register /> },
        // { path: 'reset-password', element: <ResetPassword /> },
        // { path: 'verify', element: <VerifyCode /> },
      ],
    },
    // {
    //   path: '/',
    //   element: <Navigate to="/dashboard/one" replace />,
    // },
    {
      path: '/',
      element: (
        <AuthProvider>
          <AuthGuard>
            <DashboardLayout />
          </AuthGuard>
        </AuthProvider>),
      children:[
        { element: <Navigate to="/dashboard" replace />, index: true },
        {
          path: 'dashboard',
          element: <Dashboard />,
        },
        {
          path: 'members',
          element: <Members />,
        },
        {
          path: 'corporates',
          element: <Corporate />,
        },
        {
          path: 'corporates/create',
          element: <CorporateCreate />,
        },
        {
          path: 'corporates/:corporate_id',
          element: <CorporateShow />,
        },
        {
          path: 'corporates/:corporate_id/edit',
          element: <CorporateCreate />,
        },

        {
          path: 'corporates/:corporate_id/divisions',
          element: <CorporateDivisions />,
        },
        {
          path: 'corporates/:corporate_id/divisions/create',
          element: <CorporateDivisionsCreate />,
        },
        {
          path: 'corporates/:corporate_id/divisions/:id/edit',
          element: <CorporateDivisionsCreate />,
        },

        {
          path: 'corporates/:corporate_id/members',
          element: <CorporateMembers />,
        },

        {
          path: 'corporates/:corporate_id/plans/create',
          element: <PlanCreate />,
        },
        {
          path: 'corporates/:corporate_id/plans',
          element: <Plans />,
        },

        {
          path: 'corporates/:corporate_id/corporate-plans/create',
          element: <CorporatePlanCreate />,
        },
        {
          path: 'corporates/:corporate_id/corporate-plans/:id/edit',
          element: <CorporatePlanCreate />,
        },
        {
          path: 'corporates/:corporate_id/corporate-plans',
          element: <CorporatePlans />,
        },

        {
          path: 'corporates/:corporate_id/benefits/create',
          element: <BenefitCreate />,
        },
        {
          path: 'corporates/:corporate_id/benefits',
          element: <Benefits />,
        },

        {
          path: 'corporates/:corporate_id/corporate-benefits/create',
          element: <CorporateBenefitsCreate />,
        },
        {
          path: 'corporates/:corporate_id/corporate-benefits',
          element: <CorporateBenefits />,
        },
        {
          path: 'corporates/:corporate_id/corporate-benefits/:id/edit',
          element: <CorporateBenefitsCreate />,
        },

        {
          path: 'corporates/:corporate_id/diagnosis-exclusions',
          element: <DiagnosisExclusions />,
        },

        {
          path: 'master/diagnosis',
          element: <MasterDiagnosis />,
        },
      ]
    },
    // {
    //   path: '/dashboard',
    //   element: <DashboardLayout />,
    //   children: [
    //     { element: <Navigate to="/dashboard/one" replace />, index: true },
    //     { path: 'one', element: 
    //         <AuthProvider><PageOne /></AuthProvider> },
    //     { path: 'two', element: 
    //         <AuthProvider><PageTwo /></AuthProvider> },
    //     { path: 'three', element: 
    //         <AuthProvider><PageThree /></AuthProvider> },
    //     {
    //       path: 'user',
    //       children: [
    //         { element: <Navigate to="/dashboard/user/four" replace />, index: true },
    //         { path: 'four', element: <AuthProvider><PageFour /></AuthProvider> },
    //         { path: 'six', element: <AuthProvider><PageSix /> </AuthProvider> },
    //       ],
    //     },
    //   ],
    // },
    {
      path: '*',
      element: <LogoOnlyLayout />,
      children: [
        { path: '404', element: <NotFound /> },
        { path: '*', element: <Navigate to="/404" replace /> },
      ],
    },
    { path: '*', element: <Navigate to="/404" replace /> },
  ]);
}

const Login = Loadable(lazy(() => import('../pages/auth/Login')));

// Dashboard
const Dashboard = Loadable(lazy(() => import('../pages/Dashboard')));
const NotFound = Loadable(lazy(() => import('../pages/Page404')));

// Members
const Members = Loadable(lazy(() => import('../pages/Members/Index')));
const MedicinesCreate = Loadable(lazy(() => import('../pages/Medicines/Create')));

const Corporate = Loadable(lazy(() => import('../pages/Corporates/Index')));
const CorporateCreate = Loadable(lazy(() => import('../pages/Corporates/CreateUpdate')));
const CorporateShow = Loadable(lazy(() => import('../pages/Corporates/Show')));

const CorporateDivisions = Loadable(lazy(() => import('../pages/Corporates/Division/Index')));
const CorporateDivisionsCreate = Loadable(lazy(() => import('../pages/Corporates/Division/CreateUpdate')));

const CorporateMembers = Loadable(lazy(() => import('../pages/Corporates/Member/Index')));

const BenefitCreate = Loadable(lazy(() => import('../pages/Corporates/Benefit/Create')));
const Benefits = Loadable(lazy(() => import('../pages/Corporates/Benefit/Index')));

const CorporateBenefitsCreate = Loadable(lazy(() => import('../pages/Corporates/CorporateBenefit/CreateUpdate')));
const CorporateBenefits = Loadable(lazy(() => import('../pages/Corporates/CorporateBenefit/Index')));

const CorporatePlanCreate = Loadable(lazy(() => import('../pages/Corporates/CorporatePlan/CreateUpdate')));
const CorporatePlans = Loadable(lazy(() => import('../pages/Corporates/CorporatePlan/Index')));

const PlanCreate = Loadable(lazy(() => import('../pages/Corporates/Plan/Create')));
const Plans = Loadable(lazy(() => import('../pages/Corporates/Plan/Index')));

const DiagnosisExclusions = Loadable(lazy(() => import('../pages/Corporates/DiagnosisExclusion/Index')));

const MasterDiagnosis = Loadable(lazy(() => import('../pages/Master/Diagnosis/Index')));