Updated: Router

src/App.js

@@ -1,9 +1,9 @@
 import { Routes, Route, useLocation, Navigate } from 'react-router-dom';
 
-import Test from './components/Test';
 import AuthProvider, { useAuth } from './config/authProvider';
 import localizationInit from './config/localization';
 import Dashboard from './layouts/dashboard';
+import Login from './pages/login';
 
 localizationInit();
 
@@ -26,9 +26,19 @@ function App() {
   return (
     <AuthProvider>
       <Routes>
-        <Route path="/" element={<Dashboard />} />
+        <Route path="/login" element={<Login />} />
-        <Route path="/login" element={<Test />} />
+        {/* <Route path="/signup" element={<Test />} /> */}
-        <Route path="/dashboard" element={<RequireAuth>This is secret</RequireAuth>} />
+        <Route
+          path="/"
+          element={
+            <RequireAuth>
+              <Dashboard />
+            </RequireAuth>
+          }
+        >
+          <Route path="/" element={<div>This is content</div>} />
+        </Route>
+        <Route path="*" element={<p>This page does not exist</p>} />
       </Routes>
     </AuthProvider>
   );

src/layouts/dashboard/index.js

@@ -1,7 +1,8 @@
+import { Outlet } from 'react-router-dom';
 import styles from './dashboard.module.css';
 import Sidebar from './Sidebar';
 
-export default function Dashboard({ children }) {
+export default function Dashboard() {
   return (
     <div className={styles.dashboardGrid}>
       <Sidebar />
@@ -10,7 +11,9 @@ export default function Dashboard({ children }) {
         <div className={styles.breadcrumbs}>
           breadcrumbs {'>'} are {'>'} here
         </div>
-        <div className={styles.content}>rest content comes here</div>
+        <div className={styles.content}>
+          <Outlet />
+        </div>
       </div>
     </div>
   );