Routing

The routing in Tokyo React Admin Dashboad uses react-router@6 and can be configured inside this file: src\router.tsx

Below you'll find a code snippet extracted from the router.tsx file:

1import Guest from 'src/components/Guest';
2import Authenticated from 'src/components/Authenticated';
3import ExtendedSidebarLayout from 'src/layouts/ExtendedSidebarLayout';
4
5const Analytics = Loader(lazy(() => import('src/content/dashboards/Analytics')));
6const Banking = Loader(lazy(() => import('src/content/dashboards/Banking')));
7const Commerce = Loader(lazy(() => import('src/content/dashboards/Commerce')));
8
9const routes: PartialRouteObject[] = [
10  {
11    path: 'dashboards',
12    element: (
13      <Authenticated>
14        <ExtendedSidebarLayout />
15      </Authenticated>
16    ),
17    children: [
18      {
19        path: '/',
20        element: (
21          <Navigate
22            to="/dashboards/analytics"
23            replace
24          />
25        )
26      },
27      {
28        path: 'analytics',
29        element: <Analytics />
30      },
31      {
32        path: 'banking',
33        element: <Banking />
34      }
35    ]
36  }
37];
38
39export default routes;

Sidebar Navigation

To modify the current sidebar navigation, edit the following file src\layouts\ExtendedSidebarLayout\Sidebar\SidebarMenu\items.ts. It contains an items array used for building the sidebar menu tree. The 'link' parameter represents the entry from router.tsx

1import type { ReactNode } from 'react';
2
3  import AnalyticsTwoToneIcon from '@mui/icons-material/AnalyticsTwoTone';
4  
5  export interface MenuItem {
6    link?: string;
7    icon?: ReactNode;
8    badge?: string;
9    items?: MenuItem[];
10    name: string;
11  }
12  
13  export interface MenuItems {
14    items: MenuItem[];
15    heading: string;
16  }
17  
18  const menuItems: MenuItems[] = [
19    {
20      heading: 'Dashboards',
21      items: [
22        {
23          name: 'Analytics',
24          icon: AnalyticsTwoToneIcon,
25          link: '/dashboards/analytics'
26        },
27        {
28          name: 'Healthcare',
29          icon: AnalyticsTwoToneIcon,
30          link: '/dashboards/healthcare',
31          items: [
32            {
33              name: 'Doctors Page',
34              badge: 'Hot',
35              link: '/dashboards/healthcare/doctor'
36            },
37            {
38              name: 'Hospital Overview',
39              link: '/dashboards/healthcare/hospital'
40            }
41          ]
42        }
43      ]
44    },
45    {
46      heading: 'Applications',
47      items: [
48        {
49          name: 'Calendar',
50          icon: AnalyticsTwoToneIcon,
51          link: '/applications/calendar'
52        }
53      ]
54    }
55  ];
56  
57  export default menuItems;
58