Routes:

import { lazy, Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
<BrowserRouter>
  <Routes>
  // For Frontend
           <Route element={<FrontLayout />}>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
          </Route>
  // For Backend
  		  <Route path="/admin" element={<ProtectedRoute />}>
          <Route element={<AdminLayout />}>
            <Route path="dashboard" element={<Dashboard />} />
            <Route path="setting" element={<Setting />} />
            <Route path="users" element={<User />} />
            <Route path="pages" element={<Pages />} />
          </Route>
        </Route>
        
  </Routes>
</BrowserRouter>

  <Route element={<FrontLayout />}> : this is component inside component folder

 <Route path="/" element={<Home />} /> : this is page save inside page folder

import PageLoader from "../components/front/layout/FrontLayout ";

Front Layout:

import { Outlet } from "react-router-dom";
import React from "react";
 return (
    <div>
      {/* Navbar */}
      <Header />
      <Outlet />
      <Footer />
    </div>
  );
}

App.js:

import AppRoutes from "./routes/AppRoutes";

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

export default App;