Routing

Page and URL routing

The Datta Able routing system is based on React Router and its package, React Router DOM. It also utilises code splitting for improved performance.

How can I add a new page with a menu item?

You can use the explanation below 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 />
        },
        ....
      ]
    },
    ApplicationRoutes,
    AdminPanelRoutes,
    NavigationRoutes,
    ...
  ],
  {
    basename: import.meta.env.VITE_APP_BASE_NAME
  }
);

export default router;

VITE ( JS )

How can I add a new page with a menu item? You can use the explanation below 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,
    ...
    ...
  ],
  {
    basename: import.meta.env.VITE_APP_BASE_NAME
  }
);

export default router;

VITE (JS)

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

    {
      id: 'newmenu',
      title: "newmenu",
      type: 'item',
      icon: "ph ph-chart-donut",
      url: '/newmenu',
    },
    ...
    ...