React Routing

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 component here is the path as follow root: src » main.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.

Import the main.tsx into App.tsx and add it to the imports array. refer to the structure given below

  import React, { Fragment } from "react";
  import ReactDOM from "react-dom/client";
  import { BrowserRouter, Route, Routes } from "react-router-dom";
  import App from "./layout/App";
  import "./index.scss";
  import Sales from "./component/dashboards/sales/sales";
  import { RouteData } from "./common/routingData";
  import { HelmetProvider } from 'react-helmet-async';
  
  const helmetContext = {};
  
  const container: HTMLElement | null = document.getElementById('root');
  const root = createRoot(container!);
  root.render(
    <Fragment>
      <HelmetProvider context={helmetContext}>
      <BrowserRouter>
      <ScrollToTop/>
          <Routes>
         {RouteData.map((idx) => (
          <Fragment key={Math.random()}>
           <Route path={`${import.meta.env.BASE_URL}`} element={<App />}>
           <Route index element={<Sales />} />
           <Route exact path={idx.path} element={idx.element} />
           </Route>
              </Fragment>
         ))}	
       </Routes>
    </BrowserRouter>
  </HelmetProvider>
  </Fragment>,
   );