Adding a New Route

This guide walks you through adding a new route in your react-router-dom setup.

1. Create a New Page Component

// src/pages/AboutUs.jsx
import React from "react";

const AboutUs = () => {
    return (
        

            
About Us
            
Welcome to the About Us page.
        
    );
};

export default AboutUs;
  

2. Add the Route in allRoutes.jsx

// src/routes/allRoutes.jsx
import AboutUs from "@src/pages/AboutUs";

const routes = [
    { path: "/", component: <DashboardsPage /> },
    { path: "/about-us", component: <AboutUs /> }, // ✅ Sidebar enabled
];

const nonAuthRoutes = [
    { path: "/page/contact-us", component: <ContactUs /> },
    { path: "/auth", component: <Auth /> }, // ✅ No sidebar
];

export { routes, nonAuthRoutes };
  

3. Ensure the Routing Component Applies Changes

// src/routes/Routing.jsx

import { Route, Routes } from "react-router-dom";
import { nonAuthRoutes, routes } from "./allRoutes";
import NonLayout from "@src/layout/nonLayout";
import Layout from "@src/layout/layout";

const Routing = () => {
    return (
        <Routes>
            {/* Routes with Sidebar & Topbar */}
            {routes.map((item, key) => (
                <Route key={key} path={item.path} element={<Layout>{item.component}</Layout>} />
            ))}

            {/* Routes without Sidebar & Topbar */}
            {nonAuthRoutes.map((item, key) => (
                <Route key={key} path={item.path} element={<NonLayout>{item.component}</NonLayout>} />
            ))}
        </Routes>
    );
};

export default Routing;
  

4. Use Routing in App.jsx

//  src/App.jsx
import { BrowserRouter } from "react-router-dom";
import Routing from "./routes/Routing";

function App() {
    return (
        <Routing />
    );
}

export default App;  

5. Verify the New Route

Open your browser and go to:

• http://localhost:5173/about-us → If added to routes, it will have the sidebar.
• http://localhost:5173/auth → If added to nonAuthRoutes, it will not have the sidebar.