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

import { lazy } from 'react';
import { createBrowserRouter } from 'react-router-dom';

// project import
import MainRoutes from './MainRoutes';

import GuestLayout from 'layouts/GuestLayout';

// render - landing page
const PagesLanding = lazy(() => import('../views/page-layouts/Landing'));

// ==============================|| ROUTING RENDER ||============================== //

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <GuestLayout />,
      children: [
        {
          index: true,
          element: <PagesLanding />
        }
      ]
    },
    MainRoutes
  ],
  { basename: import.meta.env.VITE_APP_BASE_NAME }
);

export default router;