From 7dbfd7efbecb87ab31cf5f0ff53a4b1a5e86dcf2 Mon Sep 17 00:00:00 2001 From: tin0312 <105316547+tin0312@users.noreply.github.com> Date: Wed, 9 Aug 2023 11:44:02 -0400 Subject: [PATCH] Setting Routes & Layout --- package-lock.json | 64 ++++++++++++++++++++++++++++++++++++++- package.json | 4 ++- src/App.css | 3 +- src/App.jsx | 18 ++++++++++- src/components/Footer.jsx | 10 ++++++ src/components/Header.jsx | 28 +++++++++++++++++ src/components/Layout.jsx | 16 ++++++++++ 7 files changed, 138 insertions(+), 5 deletions(-) create mode 100644 src/components/Footer.jsx create mode 100644 src/components/Header.jsx create mode 100644 src/components/Layout.jsx diff --git a/package-lock.json b/package-lock.json index aea1d5d..fd7e4a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,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", @@ -919,6 +921,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.2.tgz", + "integrity": "sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==", + "engines": { + "node": ">=14" + } + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -2936,6 +2946,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.14.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz", + "integrity": "sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==", + "dependencies": { + "@remix-run/router": "1.7.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.14.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.2.tgz", + "integrity": "sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==", + "dependencies": { + "@remix-run/router": "1.7.2", + "react-router": "6.14.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/regexp.prototype.flags": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", @@ -4090,6 +4130,11 @@ "fastq": "^1.6.0" } }, + "@remix-run/router": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.2.tgz", + "integrity": "sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==" + }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -5539,6 +5584,23 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.14.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz", + "integrity": "sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==", + "requires": { + "@remix-run/router": "1.7.2" + } + }, + "react-router-dom": { + "version": "6.14.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.2.tgz", + "integrity": "sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==", + "requires": { + "@remix-run/router": "1.7.2", + "react-router": "6.14.2" + } + }, "regexp.prototype.flags": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", diff --git a/package.json b/package.json index d9aa372..d2688dc 100644 --- a/package.json +++ b/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", diff --git a/src/App.css b/src/App.css index 55406b7..202336d 100644 --- a/src/App.css +++ b/src/App.css @@ -4,6 +4,5 @@ box-sizing: border-box; } body { - color: #fff; - background-color: black; + color: black; } diff --git a/src/App.jsx b/src/App.jsx index 7ae15fd..1af19ab 100644 --- a/src/App.jsx +++ b/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 ( <> -

Justin Hoang

+ + + }> + } /> + } /> + }/> + }/> + + + ) } diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx new file mode 100644 index 0000000..5eebe2a --- /dev/null +++ b/src/components/Footer.jsx @@ -0,0 +1,10 @@ +import React from "React" + + +export default function Footer() { + return ( + + ) +} \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 0000000..7104e82 --- /dev/null +++ b/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 ( +
+ isActive ? isActiveLink : null } > + Home + + isActive ? isActiveLink : null }> + About + + isActive ? isActiveLink : null } > + Projects + + isActive ? isActiveLink : null }> + Album + +
+ ) +} \ No newline at end of file diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx new file mode 100644 index 0000000..0c7edb3 --- /dev/null +++ b/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 ( +
+
+
+ +
+
+ ) +} \ No newline at end of file