Udon – Javascript React Bootstrap Premium Admin Dashboard Template

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.jsx file under src » main.jsx

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.jsx into App.jsx and add it to the imports array.


import { Fragment } from 'react';
import ReactDOM from 'react-dom/client'
import App from './pages/layout/App.jsx'
import './index.scss'
import { HelmetProvider } from 'react-helmet-async';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { RouteData } from './pages/common/arreydata/Routingdata.jsx';


import Signin from './pages/common/firebase/Signin.jsx';
import Signup from './pages/common/firebase/Signup.jsx';
import Forgetpassword from './pages/common/firebase/Forgetpassword.jsx';

import Landingpagelayout from './pages/layout/Landingpagelayout.jsx';
import Landing from './pages/maincomponent/pagecomponent/Landing.jsx';
import Joblanding from './pages/maincomponent/pagecomponent/Joblanding.jsx';
import Customer from './pages/maincomponent/dashboards/Customer.jsx';
import CustomerDBLayout from './pages/layout/CustomerDBLayout.jsx';
import Authenticationlayout from './pages/layout/Authenticationlayout.jsx';
import Error500 from './pages/maincomponent/error/Error500.jsx';
import Comingsoon from './pages/maincomponent/authentication/Comingsoon.jsx';
import Cpbasic from './pages/maincomponent/authentication/createpassword/Cpbasic.jsx';
import Cpcover from './pages/maincomponent/authentication/createpassword/Cpcover.jsx';
import Lsbasic from './pages/maincomponent/authentication/lockscreen/Lsbasic.jsx';
import Lscover from './pages/maincomponent/authentication/lockscreen/Lscover.jsx';
import Rpbasic from './pages/maincomponent/authentication/resetpassword/Rpbasic.jsx';
import Rpcover from './pages/maincomponent/authentication/resetpassword/Rpcover.jsx';
import Sibasic from './pages/maincomponent/authentication/signin/Sibasic.jsx';
import Sicover from './pages/maincomponent/authentication/signin/Sicover.jsx';
import Subasic from './pages/maincomponent/authentication/signup/Subasic.jsx';
import Sucover from './pages/maincomponent/authentication/signup/Sucover.jsx';
import Tsvbasic from './pages/maincomponent/authentication/twostepverification/Tsvbasic.jsx';
import Tsvcover from './pages/maincomponent/authentication/twostepverification/Tsvcover.jsx';
import Undermaintainance from './pages/maincomponent/authentication/Undermaintainance.jsx';
import Error401 from './pages/maincomponent/error/Error401.jsx';
import Error404 from './pages/maincomponent/error/Error404.jsx';
import Firebaselayout from './pages/layout/Firebaselayout.jsx';



ReactDOM.createRoot(document.getElementById('root')!).render(
    <Fragment>
    <HelmetProvider>
    <BrowserRouter>
    <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 path={`${import.meta.env.BASE_URL}`} element={<App />}>
            {RouteData.map((idx) => (
                <Route key={idx.id} path={idx.path} element={idx.element} />
            ))}
            

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

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

            <Route path={`${import.meta.env.BASE_URL}maincomponent/authentication/comingsoon`} element={<Comingsoon />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/authentication/createpassword/cpbasic`} element={<Cpbasic />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/authentication/createpassword/cpcover`} element={<Cpcover />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/authentication/lockscreen/lsbasic`} element={<Lsbasic />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/authentication/lockscreen/lscover`} element={<Lscover />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/authentication/resetpassword/rpbasic`} element={<Rpbasic />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/authentication/resetpassword/rpcover`} element={<Rpcover />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/authentication/signin/sibasic`} element={<Sibasic />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/authentication/signin/sicover`} element={<Sicover />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/authentication/signup/subasic`} element={<Subasic />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/authentication/signup/sucover`} element={<Sucover />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/authentication/twostepverification/tsvbasic`} element={<Tsvbasic />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/authentication/twostepverification/tsvcover`} element={<Tsvcover />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/authentication/undermaintainance`} element={<Undermaintainance />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/error/error401`} element={<Error401 />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/error/error404`} element={<Error404 />} />
            <Route path={`${import.meta.env.BASE_URL}maincomponent/error/error500`} element={<Error500 />} />
            

            </Routes>
            </BrowserRouter>
            </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\pages\common\arreydata\Sidemenudata.jsx)
Ex:  

{
    title: "Dashboards", icon: 'bi-house', type: "sub", menusub: true, active: false, selected: false, dirchange: false, children: 
    [
        { path: `${import.meta.env.BASE_URL}maincomponent/dashboards/sales`, type: "link", active: false, selected: false, dirchange: false, title: "Sales", },
    ],
},