Routing

This template routing system based on react-router and its package react-router-dom, it's also using code splitting for better performance.

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.

Configure route

Opensrc/routes.jsxYou will find the below example code. In the below code we have shown how you can add a new page route.

router.jsx

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}/>
  }
];

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.

menus-items.jsx

// 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;