React Routing

Routing
In a single-page application, you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page. As users perform application tasks, they need to move between the different views that you have defined.

To handle the navigation from one view to the next, you use the React Router. The Router enables navigation by interpreting a browser URL as an instruction to change the view. Your complete route structure is place at main.tsx file under 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.

  1. Import the main.tsx into App.tsx and add it to the imports array.
    2. 
import { Fragment, lazy } from 'react';
import ReactDOM from 'react-dom/client'
import './index.scss'
import { BrowserRouter, Route, Routes } from 'react-router-dom';
const Signin = lazy(() => import('./firebase/login.tsx'));
const Signup = lazy(() => import('./firebase/signup.tsx'));

const Landingpagelayout = lazy(() => import('./pages/landinglayout.tsx'));
const Landing = lazy(() => import('./components/pages/landing/landing.tsx'));
const Joblanding = lazy(() => import('./components/pages/joblanding/joblanding.tsx'));
const Customer = lazy(() => import('./components/dashboard/customer/customer.tsx'));
const CustomerDBLayout = lazy(() => import('./pages/customerdblayout.tsx'));
const Authenticationlayout = lazy(() => import('./pages/authenticationlayout.tsx'));
const Error500 = lazy(() => import('./components/authentication/error/500-error/500-error.tsx'));
const Comingsoon = lazy(() => import('./components/authentication/coming-soon/coming-soon.tsx'));
const Cpbasic = lazy(() => import('./components/authentication/create-password/create-basic/create-basic.tsx'));
const Cpcover = lazy(() => import('./components/authentication/create-password/create-cover/create-cover.tsx'));
const Lsbasic = lazy(() => import('./components/authentication/lock-screen/lock-basic/lock-basic.tsx'));
const Lscover = lazy(() => import('./components/authentication/lock-screen/lock-cover/lock-cover.tsx'));
const Rpbasic = lazy(() => import('./components/authentication/reset-password/reset-basic/reset-basic.tsx'));
const Rpcover = lazy(() => import('./components/authentication/reset-password/reset-cover/reset-cover.tsx'));
const Sibasic = lazy(() => import('./components/authentication/sign-in/sign-in-basic/sign-in-basic.tsx'));
const Sicover = lazy(() => import('./components/authentication/sign-in/sign-in-cover/sign-in-cover.tsx'));
const Subasic = lazy(() => import('./components/authentication/sign-up/sign-up-basic/sign-up-basic.tsx'));
const Sucover = lazy(() => import('./components/authentication/sign-up/sign-up-cover/sign-up-cover.tsx'));
const Tsvbasic = lazy(() => import('./components/authentication/two-step-verification/twostep-basic/twostep-basic.tsx'));
const Tsvcover = lazy(() => import('./components/authentication/two-step-verification/twostep-cover/twostep-cover.tsx'));
const Undermaintainance = lazy(() => import('./components/authentication/under-maintainance/under-maintainance.tsx'));
const Error401 = lazy(() => import('./components/authentication/error/401-error/401-error.tsx'));
const Error404 = lazy(() => import('./components/authentication/error/404-error/404-error.tsx'));
const Firebaselayout = lazy(() => import('./pages/firebaselayout.tsx'));
const App = lazy(() => import('./pages/App.tsx'));
import { Provider } from 'react-redux';
import RootWrapper from './pages/rootwrapper.tsx';
import Forgetpassword from './firebase/forgetpassword.tsx';
import { RouteData } from './shared/common/ui/routingdata.tsx';
import store from './shared/common/ui/redux/store.tsx';




ReactDOM.createRoot(document.getElementById('root')!).render(
  <Fragment>
    {/* <HelmetProvider> */}
    <Provider store={store}>
      <RootWrapper>
        <BrowserRouter>
          {/* <Scrolltotop /> */}
          <Routes>

            <Route path={`${import.meta.env.BASE_URL}`} element={<Firebaselayout />}>
              <Route index element={<Signin />} />
              <Route path={`${import.meta.env.BASE_URL}common/firebase/signin`} element={<Signin />} />
              <Route path={`${import.meta.env.BASE_URL}common/firebase/signup`} element={<Signup />} />
              <Route path={`${import.meta.env.BASE_URL}common/firebase/forgetpassword`} element={<Forgetpassword />} />
            </Route>

            <Route path={`${import.meta.env.BASE_URL}`} element={<App />}>
              {RouteData.map((idx) => (
                <Route key={idx.id} path={idx.path} element={idx.element} />
              ))}
            </Route>

            <Route path={`${import.meta.env.BASE_URL}`} element={<Landingpagelayout />}>
              <Route path={`${import.meta.env.BASE_URL}pages/landing`} element={<Landing />} />
              <Route path={`${import.meta.env.BASE_URL}pages/joblanding`} element={<Joblanding />} />
            </Route>

            <Route path={`${import.meta.env.BASE_URL}`} element={<CustomerDBLayout />}>
              <Route path={`${import.meta.env.BASE_URL}dashboards/customer`} element={<Customer />} />
            </Route>

            <Route path={`${import.meta.env.BASE_URL}`} element={<Authenticationlayout />}>
              <Route path='*' element={<Error500 />} />
              <Route path={`${import.meta.env.BASE_URL}authentication/coming-soon`} element={<Comingsoon />} />
              <Route path={`${import.meta.env.BASE_URL}authentication/createpassword/create-password-basic`} element={<Cpbasic />} />
              <Route path={`${import.meta.env.BASE_URL}authentication/createpassword/create-password-cover`} element={<Cpcover />} />
              <Route path={`${import.meta.env.BASE_URL}authentication/lockscreen/lockscreen-basic`} element={<Lsbasic />} />
              <Route path={`${import.meta.env.BASE_URL}authentication/lockscreen/lockscreen-cover`} element={<Lscover />} />
              <Route path={`${import.meta.env.BASE_URL}authentication/resetpassword/reset-password-basic`} element={<Rpbasic />} />
              <Route path={`${import.meta.env.BASE_URL}authentication/resetpassword/reset-password-cover`} element={<Rpcover />} />
              <Route path={`${import.meta.env.BASE_URL}authentication/signin/sign-in-basic`} element={<Sibasic />} />
              <Route path={`${import.meta.env.BASE_URL}authentication/signin/sign-in-cover`} element={<Sicover />} />
              <Route path={`${import.meta.env.BASE_URL}authentication/signup/sign-up-basic`} element={<Subasic />} />
              <Route path={`${import.meta.env.BASE_URL}authentication/signup/sign-up-cover`} element={<Sucover />} />
              <Route path={`${import.meta.env.BASE_URL}authentication/twostepverification/two-step-verification-basic`} element={<Tsvbasic />} />
              <Route path={`${import.meta.env.BASE_URL}authentication/twostepverification/two-step-verification-cover`} element={<Tsvcover />} />
              <Route path={`${import.meta.env.BASE_URL}authentication/under-maintenance`} element={<Undermaintainance />} />
              <Route path={`${import.meta.env.BASE_URL}error/error401`} element={<Error401 />} />
              <Route path={`${import.meta.env.BASE_URL}error/error404`} element={<Error404 />} />
              <Route path={`${import.meta.env.BASE_URL}error/error500`} element={<Error500 />} />
            </Route>
          </Routes>
        </BrowserRouter>
      </RootWrapper>
    </Provider>
    {/* </HelmetProvider> */}
  </Fragment>
);
    Configure Link in Menu
    To Add new link in Sidemenu

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

    path : (Root: src/shared/layouts-components/sidebar/nav.tsx)
Ex:  

{
    title: "Dashboards", icon: 'bi-house', type: "sub", menusub: true, active: false, selected: false, dirchange: false, children: 
    [
        { path: `${import.meta.env.BASE_URL}dashboards/sales`, type: "link", active: false, selected: false, dirchange: false, title: "Sales", },
    ],
},
Copyright © Udon. Designed with by Spruko All rights reserved.