Routing

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 React from 'react';
                        import ReactDOM from 'react-dom/client';
                        import App from '../src/pages/App.jsx';
                        import './index.scss';
                        import Auth from './firebase/auth.jsx';
                        import Signin from './firebase/signin.jsx';
                        import Signup from './firebase/signup.jsx';
                        import Landinglayout from './pages/landinglayout.jsx';
                        import Authenticationlayout from './pages/authenticationlayout.jsx';
                        import { BrowserRouter, Route, Routes } from 'react-router-dom';
                        import Accordionscollapse from './container/advance-ui/accordionscollapes/accordionscollapes.jsx';
                        import Carousels from './container/advance-ui/carousels/carousels.jsx';
                        import Draggablecards from './container/advance-ui/draggablecards/draggablecards.jsx';
                        import Modalsclose from './container/advance-ui/modalscloses/madalscloses.jsx';
                        import Navbars from '../src/container/advance-ui/navbar/navbar.jsx';
                        import Offcanva from './container/advance-ui/offcanvas/offcanvas.jsx';
                        import Placeholders from './container/advance-ui/placheholders/placheholders.jsx';
                        import Ratings from './container/advance-ui/ratings/ratings.jsx';
                        import Sweetalerts from './container/advance-ui/sweetalerts/sweetalerts.jsx';
                        import Fullcalendar from './container/apps/calendar/calendar.jsx';
                        import Chat from './container/apps/chat/chat.jsx';
                        import Clients from './container/apps/clients/clients/clients.jsx';
                        import Addclient from './container/apps/clients/addclient/addclient.jsx'
                        import Addproduct from './container/apps/e-commers/addproduct/addproduct.jsx';
                        import Cart from './container/apps/e-commers/cart/cart.jsx';
                        import Checkout from './container/apps/e-commers/checkout/checkout.jsx';
                        import Editproducts from './container/apps/e-commers/edictproducts/edictproducts.jsx';
                        import Orders from './container/apps/e-commers/orders/orders.jsx';
                        import Oredrdetailes from './container/apps/e-commers/orderdetailes/orderdetailes.jsx';
                        import Productdetailes from './container/apps/e-commers/productdetailes/productdetailes.jsx';
                        import Products from './container/apps/e-commers/products/products.jsx';
                        import Wishlist from './container/apps/e-commers/wishlist/wishlist.jsx';
                        import Inbox from './container/apps/e-mail/inbox/inbox.jsx';
                        import Mailsetting from './container/apps/e-mail/mailsetting/mailsetting.jsx';
                        import Readmail from './container/apps/e-mail/readmail/readmail.jsx';
                        import Filedetailes from './container/apps/file-manager/filedetailes/filedetailes.jsx';
                        import Filemanager from './container/apps/file-manager/filemanager/filemanager.jsx';
                        import Files from './container/apps/file-manager/files/files.jsx';
                        import Gallery from './container/apps/gallery/gallery.jsx';
                        import Createinvoice from './container/apps/invoices/createinvoice/createinvoice.jsx';
                        import Editinvoice from './container/apps/invoices/editinvoice/editinvoice.jsx';
                        import Invoicedetailes from './container/apps/invoices/invoicedetailes/invoicedetailes.jsx';
                        import Invoicelist from './container/apps/invoices/invoice-list/invoicelist.jsx';
                        import Timeloginvoive from './container/apps/invoices/time-log-invoive/timeloginvoice.jsx';
                        import Editproject from './container/apps/projects/editproject/editproject.jsx';
                        import Projectdetailes from './container/apps/projects/projectdetailes/projectdetailes.jsx';
                        import Projectlist from './container/apps/projects/projectlist/projectlist.jsx';
                        import Projectnew from './container/apps/projects/projectnew/projectnew.jsx';
                        import Projects from './container/apps/projects/projects/projects.jsx';
                        import Createtask from './container/apps/tasks/createtask/createtask.jsx';
                        import Edittask from './container/apps/tasks/edittask/edittask.jsx';
                        import Tasklist from './container/apps/tasks/tasklist/tasklist.jsx';
                        import Tickets from './container/apps/tickets/tickets.jsx';
                        import Areacharts from './container/charts/apex-charts/areacharts/areacharts.jsx';
                        import Barcharts from './container/charts/apex-charts/barcharts/barcharts.jsx';
                        import Boxplotcharts from './container/charts/apex-charts/boxploatcharts/boxploatcharts.jsx';
                        import Bubblecharts from './container/charts/apex-charts/bubblecharts/bubblecharts.jsx';
                        import Candlestickcharts from './container/charts/apex-charts/candlestickcharts/candlestickcharts.jsx';
                        import Columncharts from './container/charts/apex-charts/columncharts/columncharts.jsx';
                        import Heatmapcharts from './container/charts/apex-charts/heatmapcharts/heatmapcharts.jsx';
                        import Linecharts from './container/charts/apex-charts/linecharts/linecharts.jsx';
                        import Mixedcharts from './container/charts/apex-charts/mixedcharts/mixedcharts.jsx';
                        import Piecharts from './container/charts/apex-charts/piecharts/piecharts.jsx';
                        import Polarareacharts from './container/charts/apex-charts/polarareacharts/polarareacharts.jsx';
                        import Radarcharts from './container/charts/apex-charts/radarcharts/radarcharts.jsx';
                        import Radialbarcharts from './container/charts/apex-charts/radialbarcharts/radialbarcharts.jsx';
                        import Rangeareacharts from './container/charts/apex-charts/rangeareacharts/rangeareacharts.jsx';
                        import Scattercharts from './container/charts/apex-charts/scattercharts/scattercharts.jsx';
                        import Timelinecharts from './container/charts/apex-charts/timelinecharts/timelinecharts.jsx';
                        import Treemapcharts from './container/charts/apex-charts/treemapcharts/treemapcharts.jsx';
                        import Chartjscharts from './container/charts/chartjscharts/chartjscharts.jsx';
                        import Echartscharts from './container/charts/echarts/echarts.jsx';
                        import Dashboard from './container/dashboard/dashboard.jsx';
                        import Floatinglabel from './container/forms/floatinglabels/floatinglabels.jsx';
                        import Sunedtior from '../src/container/forms/formeditor/sunedtior/sunedtior.jsx';
                        import Checksradios from './container/forms/formelements/checksradios/checksradios.jsx';
                        import Colorpickers from './container/forms/formelements/colorpickers/colorpickers.jsx';
                        import Datetimepicker from './container/forms/formelements/datetimepicker/datetimepicker.jsx';
                        import Fileuploads from './container/forms/formelements/fileuploads/fileuploads.jsx';
                        import Formselect from '../src/container/forms/formelements/formselect/formselect.jsx';
                        import Inputgroup from './container/forms/formelements/inputgroup/inputgroup.jsx';
                        import Inputmasks from '../src/container/forms/formelements/inputmasks/inputmasks.jsx';
                        import Inputs from './container/forms/formelements/inputs/inputs.jsx';
                        import Rangeslider from './container/forms/formelements/rangeslider/rangeslider.jsx';
                        import Formlayouts from './container/forms/formlayouts/formlayouts.jsx';
                        import Select2 from './container/forms/select2/select2.jsx';
                        import Validation from '../src/container/forms/validation/validation.jsx';
                        import Icons from './container/icons/icons.jsx';
                        import Landing from './container/landing/landing.jsx';
                        import Leafletmaps from './container/maps/leafletmaps/leafletmaps.jsx';
                        import Vectormaps from './container/maps/vectormaps/vectormaps.jsx';
                        import Createpassword from './container/pages/authentication/createpassword/createpassword.jsx';
                        import Forgotpassword from './container/pages/authentication/forgotpassword/forgotpassword.jsx';
                        import Lockscreen from './container/pages/authentication/lock-screen/lock-screen.jsx';
                        import Signinbasic from './container/pages/authentication/sign-in/sign-in.jsx';
                        import Signupbasic from './container/pages/authentication/sign-up/sign-up.jsx';
                        import Twostepverification from './container/pages/authentication/two-step-verification/two-step-verification.jsx';
                        import Undermaintenance from './container/pages/authentication/under-maintenance/under-maintenance.jsx';
                        import Blog from './container/pages/blog/blog/blog.jsx';
                        import Blogdetailes from './container/pages/blog/blogdetailes/blogdetailes.jsx';
                        import Editpost from './container/pages/blog/editpost/editpost.jsx';
                        import Contacts from './container/pages/contacts/contacts.jsx';
                        import Empty from './container/pages/emty/emty.jsx';
                        import Error401 from './container/pages/error/401error/401error.jsx';
                        import Error500 from './container/pages/error/500error/500error.jsx';
                        import Error501 from './container/pages/error/501error/501error.jsx';
                        import Faqs from './container/pages/faqs/faqs.jsx';
                        import Pricing from './container/pages/pricing/pricing.jsx';
                        import Profile from './container/pages/profile/profile.jsx';
                        import Reviews from './container/pages/reviwies/reviwies.jsx';
                        import Setting from './container/pages/setting/setting.jsx';
                        import Termsconditions from './container/pages/termscondations/termscondations.jsx';
                        import Timeline from './container/pages/timeline/timeline.jsx';
                        import Todolist from './container/pages/todolist/todolist.jsx';
                        import Datatables from './container/tables/datatables/datatables.jsx';
                        import Gridjstables from './container/tables/gridjstables/gridjstables.jsx';
                        import Tables from './container/tables/tables/tables.jsx';
                        import Alerts from '../src/container/ui-elements/alerts/alerts.jsx';
                        import Badges from '../src/container/ui-elements/badge/badge.jsx';
                        import Breadcrumbs from './container/ui-elements/breadcrumb/breadcrumb.jsx';
                        import Buttons from './container/ui-elements/button/button.jsx'
                        import Buttongroup from './container/ui-elements/buttongroup/buttongroup.jsx';
                        import Dropdowns from './container/ui-elements/dropdown/dropdown.jsx';
                        import Imagesfigures from './container/ui-elements/imagesfigures/imagesfigures.jsx';
                        import Listgroup from './container/ui-elements/listgroup/listgroup.jsx';
                        import Navtabs from './container/ui-elements/navestabes/navestabes.jsx';
                        import Objectfit from './container/ui-elements/objectfit/objectfit.jsx';
                        import Paginations from './container/ui-elements/pagination/pagination.jsx';
                        import Popovers from './container/ui-elements/popovers/popovers.jsx'
                        import Progress from './container/ui-elements/progress/progress.jsx';
                        import Spinners from './container/ui-elements/spinners/spinners.jsx';
                        import Toasts from './container/ui-elements/toasts/toasts.jsx';
                        import Tooltips from './container/ui-elements/tooltips/tooltips.jsx';
                        import Typography from './container/ui-elements/typography/typography.jsx';
                        import Additionalcontent from './container/utilities/additional-content/additional-content.jsx';
                        import Borders from './container/utilities/borders/borders.jsx';
                        import Brackpoints from './container/utilities/breckpoints/breckpoints.jsx';
                        import Colours from './container/utilities/colors/colors.jsx';
                        import Columns from './container/utilities/columns/columns.jsx';
                        import Flex from './container/utilities/flex/flex.jsx';
                        import Gutters from './container/utilities/gutters/gutters.jsx';
                        import Helpers from './container/utilities/helpers/helpers.jsx';
                        import Position from './container/utilities/postions/postions.jsx';
                        import Widgets from './container/widgets/widgets.jsx';
                        import Avatars from './container/ui-elements/avathars/avathars.jsx';
                        import Cards from './container/ui-elements/cards/cards.jsx';
                        import Swiperjs from './container/advance-ui/swiperjs/swiperjs.jsx';
                        
                        
                        ReactDOM.createRoot(document.getElementById('root')).render(
                        
                        <React.Fragment>
                        <BrowserRouter>
                        <Routes>
                        
                                 <Route path={`${import.meta.env.BASE_URL}`} element={ <Auth />}>
                                   <Route index element={ <Signin />} />
                                   <Route path={`${import.meta.env.BASE_URL}firebase/sign-in`} element={ <Signin />} />
                                   <Route path={`${import.meta.env.BASE_URL}firebase/sign-up`} element={ <Signup />} />
                                   </Route>
                        
                                 <Route path={`${import.meta.env.BASE_URL}`} element={ <App />} >
                                   <Route path={`${import.meta.env.BASE_URL}advance-ui/accordions-collapes`} element={ <Accordionscollapse />} />
                                   <Route path={`${import.meta.env.BASE_URL}advance-ui/carousel`} element={ <Carousels />} />
                                   <Route path={`${import.meta.env.BASE_URL}advance-ui/draggable-cards`} element={ <Draggablecards />} />
                                   <Route path={`${import.meta.env.BASE_URL}advance-ui/modals-close`} element={ <Modalsclose />} />
                                   <Route path={`${import.meta.env.BASE_URL}advance-ui/navbar`} element={ <Navbars />} />
                                   <Route path={`${import.meta.env.BASE_URL}advance-ui/offcanvas`} element={ <Offcanva />} />
                                   <Route path={`${import.meta.env.BASE_URL}advance-ui/placeholders`} element={ <Placeholders />} />
                                   <Route path={`${import.meta.env.BASE_URL}advance-ui/ratings`} element={ <Ratings />} />
                                   <Route path={`${import.meta.env.BASE_URL}advance-ui/sweet-alerts`} element={ <Sweetalerts />} />
                                   <Route path={`${import.meta.env.BASE_URL}advance-ui/swiper-js`} element={ <Swiperjs />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/calender`} element={ <Fullcalendar />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/chat`} element={ <Chat />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/clients/clients`} element={ <Clients />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/clients/add-client`} element={ <Addclient />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/e-commers/add-products`} element={ <Addproduct />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/e-commers/cart`} element={ <Cart />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/e-commers/checkout`} element={ <Checkout />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/e-commers/edit-products`} element={ <Editproducts />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/e-commers/orders`} element={ <Orders />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/e-commers/order-details`} element={ <Oredrdetailes />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/e-commers/product-details`} element={ <Productdetailes />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/e-commers/products`} element={ <Products />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/e-commers/wishlist`} element={ <Wishlist />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/e-mail/inbox`} element={ <Inbox />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/e-mail/mail-setting`} element={ <Mailsetting />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/e-mail/read-mail`} element={ <Readmail />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/file-manneger/file-detailes`} element={ <Filedetailes />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/file-manneger/file-manager`} element={ <Filemanager />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/file-manneger/files`} element={ <Files />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/gallery`} element={ <Gallery />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/invoices/create-invoice`} element={ <Createinvoice />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/invoices/edit-invoices`} element={ <Editinvoice />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/invoices/invoice-detailes`} element={ <Invoicedetailes />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/invoices/invoice-list`} element={ <Invoicelist />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/invoices/time-log-invoices`} element={ <Timeloginvoive />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/projects/edit-project`} element={ <Editproject />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/projects/project-detailes`} element={ <Projectdetailes />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/projects/project-list`} element={ <Projectlist />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/projects/project-new`} element={ <Projectnew />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/projects/projects`} element={ <Projects />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/tasks/create-task`} element={ <Createtask />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/tasks/edit-task`} element={ <Edittask />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/tasks/task-list`} element={ <Tasklist />} />
                                   <Route path={`${import.meta.env.BASE_URL}apps/tickets`} element={ <Tickets />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/area-charts`} element={ <Areacharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/bar-charts`} element={ <Barcharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/box-plotcharts`} element={ <Boxplotcharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/bubble-charts`} element={ <Bubblecharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/candlestick-charts`} element={ <Candlestickcharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/column-charts`} element={ <Columncharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/heatmap-charts`} element={ <Heatmapcharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/line-charts`} element={ <Linecharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/mixed-charts`} element={ <Mixedcharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/pie-charts`} element={ <Piecharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/polararea-charts`} element={ <Polarareacharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/radar-charts`} element={ <Radarcharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/radialbar-charts`} element={ <Radialbarcharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/range-area-charts`} element={ <Rangeareacharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/scatter-charts`} element={ <Scattercharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/timeLine-charts`} element={ <Timelinecharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/apex-charts/treemap-charts`} element={ <Treemapcharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/chatjs-charts`} element={ <Chartjscharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}charts/e-chart-charts`} element={ <Echartscharts />} />
                                   <Route path={`${import.meta.env.BASE_URL}dashboard`} element={ <Dashboard />} />
                                   <Route path={`${import.meta.env.BASE_URL}forms/floating-labels`} element={ <Floatinglabel />} />
                                   <Route path={`${import.meta.env.BASE_URL}forms/from-editor/sunedtior`} element={ <Sunedtior />} />
                                   <Route path={`${import.meta.env.BASE_URL}forms/form-elements/checks-radios`} element={ <Checksradios />} />
                                   <Route path={`${import.meta.env.BASE_URL}forms/form-elements/color-pickers`} element={ <Colorpickers />} />
                                   <Route path={`${import.meta.env.BASE_URL}forms/form-elements/data-time-pickers`} element={ <Datetimepicker />} />
                                   <Route path={`${import.meta.env.BASE_URL}forms/form-elements/file-uploads`} element={ <Fileuploads />} />
                                   <Route path={`${import.meta.env.BASE_URL}forms/form-elements/from-select`} element={ <Formselect />} />
                                   <Route path={`${import.meta.env.BASE_URL}forms/form-element/input-group`} element={ <Inputgroup />} />
                                   <Route path={`${import.meta.env.BASE_URL}forms/form-element/input-masks`} element={ <Inputmasks />} />
                                   <Route path={`${import.meta.env.BASE_URL}forms/form-element/inputs`} element={ <Inputs />} />
                                   <Route path={`${import.meta.env.BASE_URL}forms/form-element/range-slider`} element={ <Rangeslider />} />
                                   <Route path={`${import.meta.env.BASE_URL}forms/form-layouts`} element={ <Formlayouts />} />
                                   <Route path={`${import.meta.env.BASE_URL}forms/select2`} element={ <Select2 />} />
                                   <Route path={`${import.meta.env.BASE_URL}forms/validation`} element={ <Validation />} />
                                   <Route path={`${import.meta.env.BASE_URL}icons`} element={ <Icons />} />
                                   <Route path={`${import.meta.env.BASE_URL}maps/leaflet-maps`} element={ <Leafletmaps />} />
                                   <Route path={`${import.meta.env.BASE_URL}maps/vector-maps`} element={ <Vectormaps />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/blog/blog`} element={ <Blog />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/blog/blog-details`} element={ <Blogdetailes />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/blog/edit-post`} element={ <Editpost />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/empty`} element={ <Empty />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/contacts`} element={ <Contacts />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/faqs`} element={ <Faqs />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/pricing`} element={ <Pricing />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/profile`} element={ <Profile />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/reviews`} element={ <Reviews />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/setting`} element={ <Setting />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/terms-condations`} element={ <Termsconditions />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/time-line`} element={ <Timeline />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/to-do-list`} element={ <Todolist />} />
                                   <Route path={`${import.meta.env.BASE_URL}tables/data-tables`} element={ <Datatables />} />
                                   <Route path={`${import.meta.env.BASE_URL}tables/gridjs-tables`} element={ <Gridjstables />} />
                                   <Route path={`${import.meta.env.BASE_URL}tables/tables`} element={ <Tables />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/alerts`} element={ <Alerts />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/avatars`} element={ <Avatars />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/badge`} element={ <Badges />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/breadcrumb`} element={ <Breadcrumbs />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/button`} element={ <Buttons />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/button-group`} element={ <Buttongroup />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/cards`} element={ <Cards />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/dropdown`} element={ <Dropdowns />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/Images-figures`} element={ <Imagesfigures />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/listgroup`} element={ <Listgroup />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/navs-tabes`} element={ <Navtabs />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/objectfit`} element={ <Objectfit />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/pagination`} element={ <Paginations />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/popovers`} element={ <Popovers />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/progress`} element={ <Progress />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/spinners`} element={ <Spinners />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/toasts`} element={ <Toasts />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/tooltipes`} element={ <Tooltips />} />
                                   <Route path={`${import.meta.env.BASE_URL}ui-elements/typographey`} element={ <Typography />} />
                                   <Route path={`${import.meta.env.BASE_URL}utilities/additional-contacts`} element={ <Additionalcontent />} />
                                   <Route path={`${import.meta.env.BASE_URL}utilities/borders`} element={ <Borders />} />
                                   <Route path={`${import.meta.env.BASE_URL}utilities/breakpoints`} element={ <Brackpoints />} />
                                   <Route path={`${import.meta.env.BASE_URL}utilities/colors`} element={ <Colours />} />
                                   <Route path={`${import.meta.env.BASE_URL}utilities/columns`} element={ <Columns />} />
                                   <Route path={`${import.meta.env.BASE_URL}utilities/flex`} element={ <Flex />} />
                                   <Route path={`${import.meta.env.BASE_URL}utilities/gutters`} element={ <Gutters />} />
                                   <Route path={`${import.meta.env.BASE_URL}utilities/helpers`} element={ <Helpers />} />
                                   <Route path={`${import.meta.env.BASE_URL}utilities/postions`} element={ <Position />} />
                                   <Route path={`${import.meta.env.BASE_URL}widgets`} element={ <Widgets />} />
                                
                                 <Route path={`${import.meta.env.BASE_URL}`} element={ <Authenticationlayout />}>
                                   <Route path={`${import.meta.env.BASE_URL}pages/authentication/create-password`} element={ <Createpassword />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/authentication/forgot-password`} element={ <Forgotpassword />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/authentication/look-screen`} element={ <Lockscreen />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/authentication/sign-in`} element={ <Signinbasic />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/authentication/sign-up`} element={ <Signupbasic />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/authentication/two-step-varafication`} element={ <Twostepverification />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/authentication/under-maintenance`} element={ <Undermaintenance />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/error/401error`} element={ <Error401 />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/error/500error`} element={ <Error500 />} />
                                   <Route path={`${import.meta.env.BASE_URL}pages/error/501error`} element={ <Error501 />} />
                                   </Route>
                                 <Route path={`${import.meta.env.BASE_URL}`} element={ <Landinglayout />}>
                                   <Route path={`${import.meta.env.BASE_URL}landing`} element={ <Landing />} />
                                   </Route>
                                   </Routes>
                                   </BrowserRouter>
                                   </React.Fragment>
                        )
                        
                        
                        

├── src
├──components
    ├──common
        ├──sidebar
            ├──sidemenu.jsx

            export const MenuItems = [
                {
                menutitle: 'MENU',
                },
                {
                icon: ( <svg xmlns="http://www.w3.org/2000/svg" className="side-menu__icon" enableBackground="new 0 0 24 24" viewBox="0 0 24 24" width="25px" height="25px"> 

                <path d="M19.9794922,7.9521484l-6-5.2666016c-1.1339111-0.9902344-2.8250732-0.9902344-3.9589844,0l-6,5.2666016C3.3717041,8.5219116,2.9998169,9.3435669,3,10.2069702V19c0.0018311,1.6561279,1.3438721,2.9981689,3,3h2.5h7c0.0001831,0,0.0003662,0,0.0006104,0H18c1.6561279-0.0018311,2.9981689-1.3438721,3-3v-8.7930298C21.0001831,9.3435669,20.6282959,8.5219116,19.9794922,7.9521484z M15,21H9v-6c0.0014038-1.1040039,0.8959961-1.9985962,2-2h2c1.1040039,0.0014038,1.9985962,0.8959961,2,2V21z M20,19c-0.0014038,1.1040039-0.8959961,1.9985962-2,2h-2v-6c-0.0018311-1.6561279-1.3438721-2.9981689-3-3h-2c-1.6561279,0.0018311-2.9981689,1.3438721-3,3v6H6c-1.1040039-0.0014038-1.9985962-0.8959961-2-2v-8.7930298C3.9997559,9.6313477,4.2478027,9.0836182,4.6806641,8.7041016l6-5.2666016C11.0455933,3.1174927,11.5146484,2.9414673,12,2.9423828c0.4853516-0.0009155,0.9544067,0.1751099,1.3193359,0.4951172l6,5.2665405C19.7521973,9.0835571,20.0002441,9.6313477,20,10.2069702V19z"> </path> </svg>),
                path: `${import.meta.env.BASE_URL}dashboard`, type: 'link', active: false, selected: false, title: 'Dashboard'
                },
            ]