> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/datta/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/datta/routing.md).

# Routing

The Datta Able routing system is based on React Router and its package, React Router DOM. It also utilises code splitting for improved 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` And you will find the example code below. In the code below, we have shown different routes.

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

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

// project-imports
...
...

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

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <SimpleLayout />,
      children: [
        {
          index: true,
          element: <PagesLanding />
        },
        ....
      ]
    },
    ApplicationRoutes,
    AdminPanelRoutes,
    NavigationRoutes,
    ...
  ],
  {
    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
...
...

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

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <SimpleLayout />,
      children: [
        {
          index: true,
          element: <PagesLanding />
        },
        {
          path: '/landing',
          element: <PagesLanding />
        }
      ]
    },
    ApplicationRoutes,
    AdminPanelRoutes,
    NavigationRoutes,
    ...
    ...
  ],
  {
    basename: import.meta.env.VITE_APP_BASE_NAME
  }
);

export default router;
```

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

{% hint style="warning" %}
**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 &#x20;

To add one more menu item in **`<router />`**, update the following file at the same location **`src\routes\index`**

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

```typescript

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

// project-imports
...
...
const PagesLanding = Loadable(lazy(() => import('../views/Landing')));
// import new view and save it in constant. for e.g
const NewMenu = Loadable(lazy(() => import('views/new-menu')));

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

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <SimpleLayout />,
      children: [
        {
          index: true,
          element: <PagesLanding />
        },
        {
          path: '/landing',
          element: <PagesLanding />
        }
      ]
    },
    {
      path: 'new-menu-route-name',
      element: <NewMenu />
    },
    ApplicationRoutes,
    AdminPanelRoutes,
    NavigationRoutes,
    ...
    ...
  ],
  {
    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
...
...
const PagesLanding = Loadable(lazy(() => import('../views/Landing')));
// import new view and save it in a constant. for e.g
const NewMenu = Loadable(lazy(() => import('views/new-menu')));

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

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <SimpleLayout />,
      children: [
        {
          index: true,
          element: <PagesLanding />
        },
        {
          path: '/landing',
          element: <PagesLanding />
        }
      ]
    },
    {
      path: 'new-menu-route-name',
      element: <NewMenu />
    },
    ApplicationRoutes,
    AdminPanelRoutes,
    NavigationRoutes,
    ...
    ...
  ],
  {
    basename: import.meta.env.VITE_APP_BASE_NAME
  }
);

export default router;

```

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

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

```typescript
    {
      id: 'newmenu',
      title: "newmenu",
      type: 'item',
      icon: "ph ph-chart-donut",
      url: '/newmenu',
    },
    ...
    ...
```