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.jsxYou will find the below example code. In the below code we have shown how you can add a new page route.


import React, { lazy } from 'react';

// project import
import MainLayout from 'layout/MainLayout';
import AuthGuard from 'component/Auth/AuthGuard';
import Loadable from 'component/Loadable';

const DashboardDefault = Loadable(lazy(() => import('../views/Dashboard/Default')));
const SamplePage = Loadable(lazy(() => import('../views/SamplePage')));

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

const MainRoutes = {
  path: '/',
  element: (
    <AuthGuard>
      <MainLayout />
    </AuthGuard>
  ),
  children: [
    {
      path: '/dashboard/default',
      element: <DashboardDefault />
    },
    ...
    {
      path: '/sample-page',
      element: <SamplePage />
    }
  ]
};

export default MainRoutes;

Add menu item

To add menu items you can use file src/menu-items.jsx. In the below code, we have shown how you can use a new menu item.

PreviousFile StructureNextTemplate Config

Last updated