DashboardKit React
Search…
Routing
Page and URL routing
DashboardKit routing system is based on react-router and its package react-router-dom, it's also using code splitting for better performance.
How can I add a new page with a menu item?
You can use the below explanation to add/remove menu routes and their menu items.
Configure route
Open
...\src\routes\route.tsxYou will find the below example code. In the below code we have shown four different routes.typescript
src\routes\routes.tsx
1
import { lazy } from 'react';
2
3
// third party
4
import { Redirect } from 'react-router-dom';
5
6
// project imports
7
import AdminLayout from 'layouts/AdminLayout';
8
import { BASE_URL } from 'config/constant';
9
10
// -----------------------|| Routes ||-----------------------//
11
const routes = [
12
{
13
exact: true,
14
path: '/404',
15
component: lazy(() => import('../views/errors/NotFound404'))
16
},
17
...
18
...
19
{
20
path: '*',
21
layout: AdminLayout,
22
routes: [
23
{
24
exact: true,
25
path: '/dashboard/sales',
26
component: lazy(() => import('../views/dashboard/DashSales'))
27
},
28
{
29
exact: true,
30
path: '/dashboard/analytics',
31
component: lazy(() => import('../views/dashboard/DashAnalytics'))
32
},
33
...
34
...
35
{
36
path: '*',
37
exact: true,
38
component: () => <Redirect to={BASE_URL} />
39
}
40
]
41
}
42
];
43
44
export default routes;
Copied!
Last modified 6mo ago
Copy link
Contents
Configure route