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.

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.

PreviousFile StructureNextDependencies

Last updated