Valex – React + vite Admin & Dashboard Template

Valex React + vite Admin & Dashboard Template

Note:-

Please refer Faq'spage in documentation itself for queries of customization like colors,rtl ,dark,styles,etc..

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. br>

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, { Fragment, lazy } from 'react'
					import React, { Fragment, lazy } from 'react'
					import ReactDOM from 'react-dom/client'
					import './Init';
					import App from './layouts/App'
					import { BrowserRouter, Route, Routes } from 'react-router-dom';
					import './index.scss';
					import Loader from './layouts/layoutcomponents/loader';
					import CustomSwitcher from './layouts/customswitcher';

                //component import

				const Indexpage = lazy(() => import('./components/indexpage/Indexpage'));

                <Fragment>
                <BrowserRouter>
                <React.Suspense fallback={}>
                <Routes>

                //Home page

                <Route path={`${import.meta.env.BASE_URL}/`} element={}>
                <Route index element={} />

                {/* Main */}

                <Route path={`${import.meta.env.BASE_URL}indexpage`} element={} />
                </Route>

                </Routes>
                </React.Suspense>
                </BrowserRouter>
                </Fragment>

Configure Link in Menu

To Add new link in Sidemenu

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

        
├── node_modules
├── public
├── src
     ├──common
        ├──sidebarmenu.jsx
Ex:  [
       {
          menutitle: "MAIN",
          Items: [
                 { path:`${import.meta.env.BASE_URL}indexpage`,  icon: (<svg xmlns="http://www.w3.org/2000/svg" className="side-menu__icon" viewBox="0 0 24 24" >
                 <path d="M0 0h24v24H0V0z" fill="none" />
                 <path d="M5 5h4v6H5zm10 8h4v6h-4zM5 17h4v2H5zM15 5h4v2h-4z" opacity=".3" />
                 <path d="M3 13h8V3H3v10zm2-8h4v6H5V5zm8 16h8V11h-8v10zm2-8h4v6h-4v-6zM13 3v6h8V3h-8zm6 4h-4V5h4v2zM3 21h8v-6H3v6zm2-4h4v2H5v-2z" />
                 </svg>), type: 'link', active: false, selected: false, title: 'Index', badge: "badge bg-success text-light ", badgetxt: "1", },
                 ]
        },
        {
         menutitle: "GENERAL",
         Items: [

               {
                 title: 'Icons', icon: (<svg xmlns="http://www.w3.org/2000/svg" className="side-menu__icon" viewBox="0 0 24 24">
                 <path d="M0 0h24v24H0V0z" fill="none" />
                 <path d="M12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm3.5 4c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zm-7 0c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8zm3.5 9.5c-2.33 0-4.32-1.45-5.12-3.5h1.67c.7 1.19 1.97 2 3.45 2s2.76-.81 3.45-2h1.67c-.8 2.05-2.79 3.5-5.12 3.5z" opacity=".3" />
                 <circle cx="15.5" cy="9.5" r="1.5" />
                 <circle cx="8.5" cy="9.5" r="1.5" />
                 <path d="M12 16c-1.48 0-2.75-.81-3.45-2H6.88c.8 2.05 2.79 3.5 5.12 3.5s4.32-1.45 5.12-3.5h-1.67c-.69 1.19-1.97 2-3.45 2zm-.01-14C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
                 </svg>), type: 'sub', active: false, children: [
                 { path:`${import.meta.env.BASE_URL}icons/fontawesome`, type: 'link', active: false, selected: false, title: 'Font Awesome' },
                },
                ]
        },
    ]