Refer the Faq's page in documentation for clear understanding of the changes in between RTL & LTR, color varientaions such like light,dark & transperent, menu layout for vertical to horizontal
Following are the fundamental building blocks to creating a route.
main.jsx
into App.jsx
and add it
to the imports array.
import React, { Fragment, lazy } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
//component import
const App = React.lazy(() => import("../src/shade/layouts/App"));
const Dashboard = React.lazy(() =>
import("./components/dashboard/dashboard-1/dashboard")
);
const Dashboard2 = React.lazy(() =>
import("./components/dashboard/dashboard-2/dashboard2")
);
const Dashboard3 = React.lazy(() =>
import("./components/dashboard/dashboard-3/dashboard3")
);
<
React.Fragment>
<
BrowserRouter>
<
React.Suspense fallback={<
Loader />}>
<
Routes>
<
Route path={`${import.meta.env.BASE_URL}/`} element={<
App />}>
<
Route index element={<
Dashboard />} />
<
Route path={`${import.meta.env.BASE_URL}/dashboard/dashboard1`} element={<
Dashboard />}/>
<
Route path={`${import.meta.env.BASE_URL}/dashboard/dashboard2`} element={<
Dashboard2 />}/>
<
Route path={`${import.meta.env.BASE_URL}/dashboard/dashboard3`} element={<
Dashboard3 />}/>
<
/Route>
<
/Routes>
<
/React.Suspense>
<
/BrowserRouter>
<
/Fragment>
Following are the fundamental building blocks to creating a new link.
├── node_modules
├── src
├──commom
├──sidemenu.jsx
Ex: {
menutitle: "Main",
Items: [
{
title: "Dashboards",
icon: (
<
svg xmlns="http://www.w3.org/2000/svg" className="side-menu__icon" width="24" height="24" viewBox="0 0 24 24">
<
path
d="M3 13h1v7c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-7h1a1 1 0 0 0 .707-1.707l-9-9a.999.999
0 0 0-1.414 0l-9 9A1 1 0 0 0 3 13zm7 7v-5h4v5h-4zm2-15.586 6 6V15l.001 5H16v-5c0-1.103-.897-2-2-2h-4c-1.103 0-2
.897-2 2v5H6v-9.586l6-6z" />
<
/svg>
),
type: "sub",
selected:false,
active:false,
children: [
{path: `${import.meta.env.BASE_URL}/dashboard/dashboard1`,
type: "link",
active:false,
selected:false,
title: "Dashboard-1",
},
{path: `${import.meta.env.BASE_URL}/dashboard/dashboard2`,
type: "link",
active:false,
selected:false,
title: "Dashboard-2",
},
{path: `${import.meta.env.BASE_URL}/dashboard/dashboard3`,
type: "link",
active:false,
selected:false,
title: "Dashboard-3",
},
],
},
],
},