Routing

Page and URL routing

Mantis routing system is based on react-router and its package react-router-dom, it's also using code splitting for better performance.

This documentation page elaborates on routing using react-router. Given that Next.js employs the 'APP' directory, no supplementary documentation is required in this regard. You can refer to Next.js' 'APP' directory routing here: Next.js Documentation.

For further insights into Mantis Next.js' directory structure, please refer to: Next.js Folder Structure.

Configure route

Open ...\src\routes\index.js You will find the below example code. In the below code we have shown four different routes. <MainRoutes/> is the main layout routing you see after login.

JavaScript

routes/index.js

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

// project import
...
...

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

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <SimpleLayout layout={SimpleLayoutType.LANDING} />,
      children: [
        {
          index: true,
          element: <PagesLanding />
        }
      ]
    },
    LoginRoutes,
    ComponentsRoutes,
    MainRoutes
  ],
  { basename: process.env.REACT_APP_BASE_NAME }
);

export default router;

TypeScript

routes/index.tsx

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

// project import
...
...

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

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <SimpleLayout layout={SimpleLayoutType.LANDING} />,
      children: [
        {
          index: true,
          element: <PagesLanding />
        }
      ]
    },
    LoginRoutes,
    ComponentsRoutes,
    MainRoutes
  ],
  { basename: APP_BASENAME }
);

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 in the main layout

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

JavaScript

routes/MainRoutes.js

...
...
const SamplePage = Loadable(lazy(() => import('views/sample-page')));
// import new view and save it in constant. for e.g
const NewMenu = Loadable(lazy(() => import('views/new-menu')));

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

export default MainRoutes;

TypeScript

routes/MainRoutes.tsx

...
...
const SamplePage = Loadable(lazy(() => import('views/sample-page')));
// import new view and save it in constant. for e.g
const NewMenu = Loadable(lazy(() => import('views/new-menu')));

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

export default MainRoutes;

Any route added in <MainLayout> will automatically go through <AuthGuard>

Further, same menu needed to add in respective Json as well here: src/menu-items

    {
      id: 'newmenu',
      title: <FormattedMessage id="newmenu" />,
      type: 'item',
      icon: BuildOutlined,
      url: '/newmenu',
      breadcrumbs: false
    },
    ....
    ...