added routing

added routing

.vscode

@@ -0,0 +1,13 @@
+{
+    "[typescript]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
+}
+
+
+
+
+

package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1"
+    "react-icons": "^5.2.1",
+    "react-router-dom": "^6.26.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

src/App.tsx

@@ -1,24 +1,24 @@
-import Navbar from "./components/Navbar";
-import Hero from "./components/Hero";
-import HomeCards from "./components/HomeCards";
-import JobListings from "./components/JobListings";
-import ViewAllJobs from "./components/ViewAllJobs";
+import { Route, createBrowserRouter, createRoutesFromElements, RouterProvider } from "react-router-dom";
+import HomePage from "./pages/HomePage";
+import MainLayout from "./layouts/MainLayout"
+
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <Route path="/" element={<MainLayout />}>
+      <Route index element={<HomePage />} />
+    </Route>
+  ));
 
 const App = () => {
-  return (
-    <>
-      <Navbar />
-      <Hero title='Become a React Dev' subtitle='Find the React job that fits your skills and needs!'/>
-      <HomeCards />
-      <JobListings />
-      <ViewAllJobs />  
-    </>
-  )
+  return <RouterProvider router={router} />
 };
 
 export default App;
 
 
 
 // Next Lesson Use State 
-// https://www.youtube.com/watch?v=LDB4uaJ87e0&t=1644s
+// https://www.youtube.com/watch?v=LDB4uaJ87e0&t=1644s
+
+// React Router
+// https://youtu.be/LDB4uaJ87e0?t=4757

src/layouts/MainLayout.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom"
+import Navbar from "../components/Navbar"
+
+const MainLayout = () => {
+    return (
+        <>
+        <Navbar />
+        <Outlet/>
+        </>
+    )
+}
+
+export default MainLayout

src/pages/HomePage.tsx

@@ -0,0 +1,18 @@
+import Hero from "../components/Hero";
+import HomeCards from "../components/HomeCards";
+import JobListings from "../components/JobListings";
+import ViewAllJobs from "../components/ViewAllJobs";
+
+const HomePage = () => {
+    return (
+        <>
+            <Hero title='Become a React Dev' subtitle='Find the React job that fits your skills and needs!' />
+            <HomeCards />
+            <JobListings />
+            <ViewAllJobs/>
+        </>
+    )
+}
+
+export default HomePage
+