Routing

This Template routing system 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

Opensrc/routes/MainRoutes.tsxYou will find the below example code. In the below code we have shown how you can add a new page route.

routes/index.tsx

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

// routes
import AuthRoutes from './AuthRoutes';
import MainRoutes from './MainRoutes';
import PagesRoutes from './PagesRoutes';

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

const router = createBrowserRouter([AuthRoutes, MainRoutes, PagesRoutes], {
  basename: import.meta.env.VITE_APP_BASE_URL
});

export default router;

Add a menu item

To add one more menu item in <MainRoutes />Update the following file at the same location src\routes\MainRoutes.tsx

// project imports
import Loadable from 'components/Loadable';
import MainLayout from 'layouts/MainLayout';

const DashboardDefault = Loadable(lazy(() => import('views/dashboard/default')));
const WidgetStatistics = Loadable(lazy(() => import('views/widget/Statistics')));

// ==============================|| MAIN ROUTES ||============================== //

const MainRoutes = {
  path: '/',
  element: <MainLayout />,
  children: [
    {
      path: '/dashboard/default',
      element: <DashboardDefault />
    },
    {
      path: 'widget',
      children: [
        {
          path: 'statistic',
          element: <WidgetStatistics />
        },
        ... 
      ]
    }
  ]
}