# 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. **`<MainRoutes/>`**&#x69;s 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: <SimpleLayout layout={SimpleLayoutType.LANDING} />,
      children: [
        {
          index: true,
          element: <PagesLanding />
        }
      ]
    },
    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: <SimpleLayout layout={SimpleLayoutType.LANDING} />,
      children: [
        {
          index: true,
          element: <PagesLanding />
        }
      ]
    },
    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 **`<MainRoutes />`**, update the following file at the same location **`src\routes\MainRoutes.jsx`**

{% tabs %}
{% tab title="VITE(TS)" %}

<pre class="language-typescript" data-title="routes/MainRoutes.tsx"><code class="lang-typescript">...
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: &#x3C;DashboardLayout />,
      children: [
<strong>        {
</strong>          path: 'dashboard',
          children: [
            {
              path: 'default',
              element: &#x3C;DashboardDefault />
            },
            {
              path: 'new-menu-route-name',
              element: &#x3C;NewMenu />
            ...
        }
      ]
      ...
    }
    ...
  ]
};

export default MainRoutes;
</code></pre>

{% endtab %}

{% tab title="VITE(JS)" %}
{% code title="routes/MainRoutes.jsx" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Any route added in **`<MainLayout>`** will automatically go through **\<AuthGuard>**
{% endhint %}

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

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