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.

src\routes\routes.tsx
import { lazy } from 'react';

// third party
import { Redirect } from 'react-router-dom';

// project imports
import AdminLayout from 'layouts/AdminLayout';
import { BASE_URL } from 'config/constant';

// -----------------------|| Routes ||-----------------------//
const routes = [
    {
        exact: true,
        path: '/404',
        component: lazy(() => import('../views/errors/NotFound404'))
    },
    ...
    ...
    {
        path: '*',
        layout: AdminLayout,
        routes: [
            {
                exact: true,
                path: '/dashboard/sales',
                component: lazy(() => import('../views/dashboard/DashSales'))
            },
            {
                exact: true,
                path: '/dashboard/analytics',
                component: lazy(() => import('../views/dashboard/DashAnalytics'))
            },
            ...
            ...
            {
                path: '*',
                exact: true,
                component: () => <Redirect to={BASE_URL} />
            }
        ]
    }
];

export default routes;

Last updated