From 4948f9228d41bdb88f41f22dea320b78c8391c4a Mon Sep 17 00:00:00 2001 From: ceddybi Date: Sat, 27 Jan 2024 13:27:57 -0500 Subject: [PATCH] hash router --- src/app/index.tsx | 3 ++- src/app/layout.tsx | 46 ++++++++++++++++++++++++++++++++++++++++++++++ src/app/navbar.tsx | 7 ++++--- src/index.html | 16 +++++++++++----- yarn.lock | 20 ++++++++++++++++++++ 5 files changed, 83 insertions(+), 9 deletions(-) create mode 100644 src/app/layout.tsx diff --git a/src/app/index.tsx b/src/app/index.tsx index 4309f01..822140e 100644 --- a/src/app/index.tsx +++ b/src/app/index.tsx @@ -1,4 +1,5 @@ import { ClientProcess } from "./appx"; +import { Layout } from "./layout"; import Navbar from "./navbar"; import { createRoot } from "react-dom/client"; @@ -6,6 +7,6 @@ const root = createRoot(document.body); root.render(
- +
); diff --git a/src/app/layout.tsx b/src/app/layout.tsx new file mode 100644 index 0000000..062bf3d --- /dev/null +++ b/src/app/layout.tsx @@ -0,0 +1,46 @@ +import React from "react"; + +const Dashboard = () => { + return
Dashboard
; +}; + +const Questions = () => { + return
Questions
; +}; + +const Settings = () => { + return
Settings
; +}; + +const NotFound = () => { + return
Not Found
; +}; + +const routes = [ + { path: "", component: Dashboard }, + { path: "questions", component: Questions }, + { path: "settings", component: Settings }, + { path: "*", component: NotFound }, +]; + +export const useHashState = () => { + const [hash, setHash] = React.useState(window.location.hash || ""); + React.useEffect(() => { + const handleHashChange = () => { + console.log("hash change", window.location.hash); + setHash(window.location.hash); + }; + window.addEventListener("hashchange", handleHashChange); + return () => { + window.removeEventListener("hashchange", handleHashChange); + }; + }, []); + return hash; +}; + +export const Layout = () => { + const hash = useHashState(); + const route = routes.find((r) => `#/${r.path}` === hash); + const Component = route ? route.component : NotFound; + return ; +}; diff --git a/src/app/navbar.tsx b/src/app/navbar.tsx index 74d0d7f..833f6d9 100644 --- a/src/app/navbar.tsx +++ b/src/app/navbar.tsx @@ -5,7 +5,8 @@ import { Fragment } from "react"; const navigation = [ { name: "Dashboard", href: "/" }, - { name: "Playground", href: "/playground" }, + { name: "Questions", href: "/questions" }, + { name: "Settings", href: "/settings" }, ]; function classNames(...classes: string[]) { @@ -57,7 +58,7 @@ export default function Navbar({ user }: { user: any }) { {navigation.map((item) => ( - - - Hello World! - - + + + + Hello World! + + +
+ + + + \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 530d4aa..2dd3cab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -657,6 +657,11 @@ unbzip2-stream "1.4.3" yargs "17.7.2" +"@remix-run/router@1.14.2": + version "1.14.2" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.14.2.tgz#4d58f59908d9197ba3179310077f25c88e49ed17" + integrity sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg== + "@sindresorhus/is@^4.0.0": version "4.6.0" resolved "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz" @@ -5643,6 +5648,21 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-router-dom@^6.21.3: + version "6.21.3" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.21.3.tgz#ef3a7956a3699c7b82c21fcb3dbc63c313ed8c5d" + integrity sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g== + dependencies: + "@remix-run/router" "1.14.2" + react-router "6.21.3" + +react-router@6.21.3: + version "6.21.3" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.21.3.tgz#8086cea922c2bfebbb49c6594967418f1f167d70" + integrity sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg== + dependencies: + "@remix-run/router" "1.14.2" + react-smooth@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.5.tgz#d153b7dffc7143d0c99e82db1532f8cf93f20ecd"