> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/materially-react-material-documentation/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/materially-react-material-documentation/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/MainRoutes.tsx`You will find the below example code. In the below code we have shown how you can add a new page route.

```javascript
routes/index.tsx

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

// routes
import AuthRoutes from './AuthRoutes';
import MainRoutes from './MainRoutes';
import PagesRoutes from './PagesRoutes';

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

const router = createBrowserRouter([AuthRoutes, MainRoutes, PagesRoutes], {
  basename: import.meta.env.VITE_APP_BASE_URL
});

export default router;
```

## Add a menu item

To add one more menu item in **`<MainRoutes />`**&#x55;pdate the following file at the same location **`src\routes\MainRoutes.tsx`**

```javascript
// project imports
import Loadable from 'components/Loadable';
import MainLayout from 'layouts/MainLayout';

const DashboardDefault = Loadable(lazy(() => import('views/dashboard/default')));
const WidgetStatistics = Loadable(lazy(() => import('views/widget/Statistics')));

// ==============================|| MAIN ROUTES ||============================== //

const MainRoutes = {
  path: '/',
  element: <MainLayout />,
  children: [
    {
      path: '/dashboard/default',
      element: <DashboardDefault />
    },
    {
      path: 'widget',
      children: [
        {
          path: 'statistic',
          element: <WidgetStatistics />
        },
        ... 
      ]
    }
  ]
}

```