Routing

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

Below you'll find a code snippet extracted from the router.js 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 = [
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.js. It contains an items array used for building the sidebar menu tree. The 'link' parameter represents the entry from router.js

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