> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/mantis/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/mantis/routing.md). # Routing The Mantis routing system is based on [react-router](https://reacttraining.com/react-router/) and its package [react-router-dom,](https://reacttraining.com/react-router/web/guides/quick-start) it also uses code splitting for better performance. {% hint style="info" %} 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](https://nextjs.org/docs/app/building-your-application/routing). For further insights into Mantis Next.js' directory structure, please refer to: [Next.js Folder Structure](https://codedthemes.gitbook.io/mantis/folder-structure). {% endhint %} ## Configure route Open `src\routes\index.jsx` And you will find the example code below. In the code below, we have shown four different routes. **``**is the main layout routing you see after login. {% tabs %} {% tab title="VITE(TS)" %} {% code title="routes/index.tsx" %} ```typescript import { lazy } from 'react'; import { createBrowserRouter } from 'react-router-dom'; // project import ... ... // ==============================|| ROUTING RENDER ||============================== // const router = createBrowserRouter( [ { path: '/', element: , children: [ { index: true, element: } ] }, LoginRoutes, ComponentsRoutes, MainRoutes ], { basename: APP_BASENAME } ); export default router; ``` {% endcode %} {% endtab %} {% tab title="VITE(JS)" %} {% code title="routes/index.jsx" %} ```javascript import { lazy } from 'react'; import { createBrowserRouter } from 'react-router-dom'; // project import ... ... // ==============================|| ROUTING RENDER ||============================== // const router = createBrowserRouter( [ { path: '/', element: , children: [ { index: true, element: } ] }, LoginRoutes, ComponentsRoutes, MainRoutes ], { basename: process.env.REACT_APP_BASE_NAME } ); export default router; ``` {% endcode %} {% endtab %} {% endtabs %} {% hint style="info" %} **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. {% endhint %} ### Add a New menu/route in the main layout To add one more menu item in **``**, update the following file at the same location **`src\routes\MainRoutes.jsx`** {% tabs %} {% tab title="VITE(TS)" %}

...
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;