Routing
Page and URL routing
The Mantis routing system is based on react-router and its package react-router-dom, it's also using code splitting for better performance.
Configure route
Open src\routes\index.jsx
and 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.
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;
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.jsx
...
import DashboardLayout from 'layout/Dashboard';
...
// render - dashboard
const DashboardDefault = Loadable(lazy(() => import('pages/dashboard/default')));
// import new view and save it in constant. for e.g
const NewMenu = Loadable(lazy(() => import('views/new-menu')));
...
const MainRoutes = {
path: '/',
children: [
{
path: '/',
element: <DashboardLayout />,
children: [
{
path: 'dashboard',
children: [
{
path: 'default',
element: <DashboardDefault />
},
{
path: 'new-menu-route-name',
element: <NewMenu />
...
}
]
...
}
...
]
};
export default MainRoutes;
Any route added in <MainLayout>
will automatically go through <AuthGuard>
Further, the same menu needed to be added in respective JSON as well here: src/menu-items/index
{
id: 'newmenu',
title: <FormattedMessage id="newmenu" />,
type: 'item',
icon: BuildOutlined,
url: '/newmenu',
breadcrumbs: false
},
....
...