Routing

---

The process of routing involves choosing how an application will react to a certain URL request. The system that enables users to browse across various pages or views within a web application is referred to as routing in web development. Modern online applications must include routing because it enables developers to create dynamic single-page applications (SPAs) with numerous views that dynamically update the URL as users travel through them. A URL request is matched with a corresponding page or view in the application in a typical routing system. The user then sees the material related to that URL after the system produces the appropriate view. In this template your complete route structure is placed at main.tsx (Routing) file under src » Shared » Router » Router.tsx

Suppose you want to create a new module ( For creating a new module refer create new module ) then you have to add new routes for that modules.

Basic Route

Following are the fundamental building blocks to creating a route.

1. Import the main.tsx into App.tsx and add it to the imports array.

   
import React, { lazy } from "react"
import { Routes, Route } from "react-router-dom";
const App = lazy(() => import("../Layouts/App"));

//component import
    
const Dashboard = lazy(() => import("../../components/Dashboard/Dashboard01/Dashboard01"));
    
export const Routing = () => {

return (

   <React.Suspense fallback={<Loader />}>

   <Routes>

//Layout Structure

<Route path={`${import.meta.env.BASE_URL}`} element={<App />}>

//Home page

    <Route>
        <Route index element={<Dashboard />} />
            <Route path={`${import.meta.env.BASE_URL}dashboard/dashboard01`} element={<Dashboard />} />
        </Route>
    </Route>
</Route>
</Routes>
</React.Suspense>
)
}

Then import the component (Routing component) to main.tsx ( main-routing layout) just like below example;
                    
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.scss";
import { BrowserRouter } from "react-router-dom";
import { Routing } from "./Shared/Router/Router";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.Fragment>
    <BrowserRouter >
      <Routing/>
    </BrowserRouter>
  </React.Fragment>
);

Configure Link in Menu

---

To Add new link in Sidemenu

Following are the fundamental building blocks to creating a new link.

├── node_modules
├── public
├── src
      ├──components
            ├──Shared
                ├──Sidebar
                ├──SideMenu.tsx
    Ex:  [
           {
              menutitle: "MAIN",
              Items: {
                title: "Dashboards",
                icon: svg className="side-menu__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></code>
                <polyline points="9 22 9 12 15 12 15 22"></polyline></code>,
                type: "sub",
                selected: false,
                active: false,
                children: [
                {
                  path: `${import.meta.env.BASE_URL}dashboard/dashboard01`,
                  type: "link",
                  active: false,
                  selected: false,
                  title: "Dashboard 01",
                },
                ]
              }
            },
        ]