Added Child Routes From App and Home

src/App.js

@@ -1,12 +1,15 @@
+import NavBar from "./components/NavBar"
+import { Outlet } from "react-router-dom"
 
 function App() {
   return (
     <>
       <header>
-
+        <NavBar />
       </header>
+      <Outlet />
     </>
-  );
-};
+  )
+}
 
-export default App;
+export default App

src/pages/Home.js

@@ -1,32 +1,28 @@
-import { useState, useEffect } from "react";
-import UserCard from "../components/UserCard";
-import NavBar from "../components/NavBar";
+import { useState, useEffect } from "react"
+import UserCard from "../components/UserCard"
+import { Outlet } from "react-router-dom"
 
 function Home() {
-  const [users, setUsers] = useState([]);
+  const [users, setUsers] = useState([])
 
-  useEffect(() =>{
+  useEffect(() => {
     fetch("http://localhost:4000/users")
-      .then(r => r.json())
-      .then(data => setUsers(data))
-      .catch(error => console.error(error));
-  }, []);
-  
-  const userList = users.map(user =>{
-    return <UserCard key={user.id} user={user}/>;
-  });
+      .then((r) => r.json())
+      .then((data) => setUsers(data))
+      .catch((error) => console.error(error))
+  }, [])
+
+  const userList = users.map((user) => {
+    return <UserCard key={user.id} user={user} />
+  })
 
   return (
-    <>
-      <header>
-        <NavBar />
-      </header>
-      <main>
-        <h1>Home!</h1>
-        {userList}
-      </main>
-    </>
-  );
-};
+    <main>
+      <h1>Home!</h1>
+      <Outlet />
+      {userList}
+    </main>
+  )
+}
 
-export default Home;
+export default Home

src/routes.js

@@ -1,30 +1,36 @@
-import Home from "./pages/Home";
-import About from "./pages/About";
-import Login from "./pages/Login";
-import UserProfile from "./pages/UserProfile";
-import ErrorPage from "./pages/ErrorPage";
+import App from "./App"
+import Home from "./pages/Home"
+import About from "./pages/About"
+import Login from "./pages/Login"
+import UserProfile from "./pages/UserProfile"
+import ErrorPage from "./pages/ErrorPage"
 
 const routes = [
   {
     path: "/",
-    element: <Home />,
-    errorElement: <ErrorPage />
-  }, 
-  {
-    path: "/about",
-    element: <About />,
-    errorElement: <ErrorPage />
-  },
-  {
-    path: "/login",
-    element: <Login />,
-    errorElement: <ErrorPage />
+    element: <App />,
+    errorElement: <ErrorPage />,
+    children: [
+      {
+        path: "/",
+        element: <Home />,
+        children: [
+          {
+            path: "/profile/:id",
+            element: <UserProfile />,
+          },
+        ],
+      },
+      {
+        path: "/about",
+        element: <About />,
+      },
+      {
+        path: "/login",
+        element: <Login />,
+      },
+    ],
   },
-  {
-    path: "/profile/:id",
-    element: <UserProfile />,
-    errorElement: <ErrorPage />
-  }
-];
+]
 
-export default routes;
+export default routes