# Routing

Able Pro 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" %}
**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 %}

## Configure route

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

{% tabs %}
{% tab title="VITE (TS)" %}
{% code title="src/routes/index.tsx" %}

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

// project-imports
import ComponentsRoutes from './ComponentsRoutes';
import LoginRoutes from './LoginRoutes';
import MainRoutes from './MainRoutes';

import Loadable from 'components/Loadable';
import { SimpleLayoutType } from 'config';
import SimpleLayout from 'layout/Simple';

// render - landing page
const PagesLanding = Loadable(lazy(() => import('pages/landing')));

// ==============================|| ROUTES RENDER ||============================== //

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

export default router;

```

{% endcode %}
{% endtab %}

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

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

// project-imports
import ComponentsRoutes from './ComponentsRoutes';
import LoginRoutes from './LoginRoutes';
import MainRoutes from './MainRoutes';

import Loadable from 'components/Loadable';
import { SimpleLayoutType } from 'config';
import SimpleLayout from 'layout/Simple';

// render - landing page
const PagesLanding = Loadable(lazy(() => import('pages/landing')));

// ==============================|| ROUTES RENDER ||============================== //

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

export default router;
```

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

### 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`**

{% tabs %}
{% tab title="VITE (TS)" %}
{% code title="MainRoutes.tsx" %}

```typescript
...
...
const SamplePage = Loadable(lazy(() => import('pages/extra-pages/sample-page')));
// 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: '/sample-page',
                        element: <SamplePage />
                    },
                    {
                        path: '/newmenu',
                        element: <NewMenu />
                    }
                  ]
                }
    ]            
};

export default MainRoutes;
```

{% endcode %}
{% endtab %}

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

```javascript
...
...
const SamplePage = Loadable(lazy(() => import('pages/extra-pages/sample-page')));
// 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: '/sample-page',
                        element: <SamplePage />
                    },
                    {
                        path: '/newmenu',
                        element: <NewMenu />
                    }
                  ]
                }
    ]            
};

export default MainRoutes;
```

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

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