Routing

Page and URL routing

Datta Able 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\index And you will find the example code below. In the code below, we have shown different routes.

VITE ( TS )

src/routes/index.tsx

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

// project-imports
...
...

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

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <SimpleLayout />,
      children: [
        {
          index: true,
          element: <PagesLanding />
        },
        {
          path: '/landing',
          element: <PagesLanding />
        }
      ]
    },
    ApplicationRoutes,
    AdminPanelRoutes,
    NavigationRoutes,
    ComponentsRoutes,
    FormsRoutes,
    TablesRoutes,
    PagesRoutes,
    OtherRoutes,
    ChartMapRoutes
  ],
  {
    basename: import.meta.env.VITE_APP_BASE_NAME
  }
);

export default router;

VITE ( JS )

src/routes/index.jsx

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

// project-imports
...
...

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

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <SimpleLayout />,
      children: [
        {
          index: true,
          element: <PagesLanding />
        },
        {
          path: '/landing',
          element: <PagesLanding />
        }
      ]
    },
    ApplicationRoutes,
    AdminPanelRoutes,
    NavigationRoutes,
    ComponentsRoutes,
    FormsRoutes,
    TablesRoutes,
    PagesRoutes,
    OtherRoutes,
    ChartMapRoutes
  ],
  {
    basename: import.meta.env.VITE_APP_BASE_NAME
  }
);

export default router;

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.

Add a New menu/route

To add one more menu item in <router />, update the following file at the same location src\routes\index

VITE ( TS )

routes/index.tsx

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

// project-imports
...
...
const PagesLanding = Loadable(lazy(() => import('../views/Landing')));
// import new view and save it in constant. for e.g
const NewMenu = Loadable(lazy(() => import('views/new-menu')));

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

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <SimpleLayout />,
      children: [
        {
          index: true,
          element: <PagesLanding />
        },
        {
          path: '/landing',
          element: <PagesLanding />
        }
      ]
    },
    {
      path: 'new-menu-route-name',
      element: <NewMenu />
    },
    ApplicationRoutes,
    AdminPanelRoutes,
    NavigationRoutes,
    ComponentsRoutes,
    FormsRoutes,
    TablesRoutes,
    PagesRoutes,
    OtherRoutes,
    ChartMapRoutes
  ],
  {
    basename: import.meta.env.VITE_APP_BASE_NAME
  }
);

export default router;

VITE (JS)

src/routes/index.jsx

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

// project-imports
...
...
const PagesLanding = Loadable(lazy(() => import('../views/Landing')));
// import new view and save it in a constant. for e.g
const NewMenu = Loadable(lazy(() => import('views/new-menu')));

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

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <SimpleLayout />,
      children: [
        {
          index: true,
          element: <PagesLanding />
        },
        {
          path: '/landing',
          element: <PagesLanding />
        }
      ]
    },
    {
      path: 'new-menu-route-name',
      element: <NewMenu />
    },
    ApplicationRoutes,
    AdminPanelRoutes,
    NavigationRoutes,
    ComponentsRoutes,
    FormsRoutes,
    TablesRoutes,
    PagesRoutes,
    OtherRoutes,
    ChartMapRoutes
  ],
  {
    basename: import.meta.env.VITE_APP_BASE_NAME
  }
);

export default router;

Further, the same menu needed to be added in the respective JSON as well here: src/menu-items/index

    {
      id: 'newmenu',
      title: <FormattedMessage id="newmenu" />,
      type: 'item',
      icon: <i className="ph ph-chart-donut" />,
      url: '/newmenu',
    },
    ...
    ...