Setting Routes & Layout

package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "boostrap": "^2.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router": "^6.14.2",
+    "react-router-dom": "^6.14.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.css

@@ -4,6 +4,5 @@
   box-sizing: border-box;
 }
 body {
-  color: #fff;
-  background-color: black;
+  color: black;
 }

src/App.jsx

@@ -1,11 +1,27 @@
 import React from 'react'
+import { BrowserRouter, Routes, Route} from "react-router-dom"
 import './App.css'
+import Layout from "./Components/Layout"
+import About from "./Pages/About"
+import Home from "./Pages/Home"
+import Projects from "./Pages/Projects"
+import Album from "./Pages/Album"
+
 
 export default function App() {
 
   return (
     <>
-      <h1>Justin Hoang</h1>
+      <BrowserRouter>
+        <Routes>
+          <Route path = '/' element = {<Layout />}>
+              <Route index element = {<Home/>} />
+              <Route path = '/about' element = {<About/>} />
+              <Route path = '/projects' element = {<Projects/>}/>
+              <Route path = '/album' element = {<Album/>}/>
+          </Route>
+        </Routes>
+      </BrowserRouter>
     </>
   )
 }

src/components/Footer.jsx

@@ -0,0 +1,10 @@
+import React from "React"
+
+
+export default function Footer() {
+    return (
+        <footer>
+            <p>© 2023 - Developeed by Hoang Nhat Truong</p>
+        </footer>
+    )
+}

src/components/Header.jsx

@@ -0,0 +1,28 @@
+import React from "react"
+import { NavLink } from "react-router-dom"
+
+
+export default function Header() {
+    const isActiveLink= {
+        textDecoration: "underline",
+        fontWeight: "bold",
+        color: "green"
+
+    }
+    return (
+        <header>
+            <NavLink to  = "/home" style = {({isActive}) => isActive ? isActiveLink : null } >
+                Home
+            </NavLink>
+            <NavLink to  = "/about" style = {({isActive}) => isActive ? isActiveLink : null }>
+                About
+            </NavLink>
+            <NavLink to  = "/projects" style = {({isActive}) => isActive ? isActiveLink : null } >
+                Projects
+            </NavLink>
+            <NavLink to  = "/album" style = {({isActive}) => isActive ? isActiveLink : null }>
+                Album
+            </NavLink>
+        </header>
+    )
+}

src/components/Layout.jsx

@@ -0,0 +1,16 @@
+import React from "react"
+import { Outlet } from "react-router-dom"
+import Header from "./Header"
+import Footer from "./Footer"
+
+export default function Layout() {
+    return (
+      <div className=" site-wrapper">
+        <Header />
+        <main>
+            <Outlet />
+        </main> 
+        <Footer /> 
+      </div>
+    )
+}