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

# Routing

This template routing system 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's also using code splitting for better performance.

{% hint style="info" %}
**How can I add a new page with a menu item?**

You can use the below explanation to add/remove menu routes and their menu items.
{% endhint %}

## Configure route

Open`src/routes.jsx`You will find the below example code. In the below code we have shown how you can add a new page route.

{% tabs %}
{% tab title="router.jsx" %}

```javascript
import React, { Suspense, Fragment, lazy } from 'react';
import { Routes, Redirect, Route } from 'react-router-dom';

import Loader from "./components/Loader/Loader";
import AdminLayout from "./layouts/AdminLayout";
import { BASE_URL } from "./config/constant";

export const renderRoutes = (routes = []) => (
  <Suspense fallback={<Loader />}>
    <Routes>
      {routes.map((route, i) => {
        const Guard = route.guard || Fragment;
        const Layout = route.layout || Fragment;
        const Element= route.element;

        return (
          <Route
            key={i}
            path={route.path}
            exact={route.exact}
            render={(props) => (
                <Guard>
                  <Layout>
                    {route.routes
                      ? renderRoutes(route.routes)
                      : <Element props={true} />
                    }
                  </Layout>
                </Guard>
            )}
          />
        );
      })}
    </Routes>
  </Suspense>
);

const routes = [
  {
    exact: true,
    path: '/404',
    element: lazy(() => import('./views/errors/NotFound404'))
  },
  ...,
  ,
  {
    path: '*',
    exact: true,
    element: () => <Redirect to={BASE_URL}/>
  }
];
```

{% endtab %}
{% endtabs %}

## Add menu item

To add menu items you can use file `src/menu-items.jsx`. In the below code, we have shown how you can use a new menu item.

{% tabs %}
{% tab title="menus-items.jsx" %}

```javascript
// third party
import { FormattedMessage } from 'react-intl';

const menuItems = {
    items: [
        {
            id: 'navigation',
            title: <FormattedMessage id="navigation" />,
            type: 'group',
            icon: 'icon-navigation',
            children: [
                {
                    id: 'dashboard',
                    title: <FormattedMessage id="dashboard" />,
                    type: 'collapse',
                    icon: 'feather icon-home',
                    children: [
                        {
                            id: 'server',
                            title: <FormattedMessage id="server" />,
                            type: 'item',
                            url: '/dashboard/server'
                        },
                        {
                            id: 'shop',
                            title: <FormattedMessage id="shop" />,
                            type: 'item',
                            url: '/dashboard/shop',
                            badge: {
                                title: 'NEW',
                                type: 'badge-danger'
                            }
                        }
                    ]
                },
            ]
        },
        ...
        ...
        ...
        {
            id: 'support',
            title: <FormattedMessage id="support" />,
            type: 'group',
            icon: 'icon-support',
            children: [
                {
                    id: 'menu-level',
                    title: <FormattedMessage id="menu-level" />,
                    type: 'collapse',
                    icon: 'feather icon-menu',
                    children: [
                        {
                            id: 'menu-level-1.1',
                            title: <FormattedMessage id="menu-level-1.1" />,
                            type: 'item',
                            url: '#!',
                        },
                        {
                            id: 'menu-level-1.2',
                            title: <FormattedMessage id="menu-level-1.2" />,
                            type: 'collapse',
                            children: [
                                {
                                    id: 'menu-level-2.1',
                                    title: <FormattedMessage id="menu-level-2.1" />,
                                    type: 'item',
                                    url: '#',
                                },
                                {
                                    id: 'menu-level-2.2',
                                    title: <FormattedMessage id="menu-level-2.2" />,
                                    type: 'collapse',
                                    children: [
                                        {
                                            id: 'menu-level-3.1',
                                            title: <FormattedMessage id="menu-level-3.1" />,
                                            type: 'item',
                                            url: '#',
                                        },
                                        {
                                            id: 'menu-level-3.2',
                                            title: <FormattedMessage id="menu-level-3.2" />,
                                            type: 'item',
                                            url: '#',
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 'disabled-menu',
                    title: <FormattedMessage id="disabled-menu" />,
                    type: 'item',
                    url: '#',
                    classes: 'nav-item disabled',
                    icon: 'feather icon-power'
                },
                {
                    id: 'sample-page',
                    title: <FormattedMessage id="sample-page" />,
                    type: 'item',
                    url: '/sample-page',
                    classes: 'nav-item',
                    icon: 'feather icon-sidebar'
                }
            ]
        }
    ]
}

export default menuItems;
```

{% endtab %}
{% endtabs %}