hash router

stoqey · Jan 27, 2024 · 4948f92 · 4948f92
1 parent e7391c5
commit 4948f92
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 9 deletions.
diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -1,11 +1,12 @@
 import { ClientProcess } from "./appx";
+import { Layout } from "./layout";
 import Navbar from "./navbar";
 import { createRoot } from "react-dom/client";
 
 const root = createRoot(document.body);
 root.render(
   <div className="h-full bg-gray-50">
     <Navbar user={null} />
-    <ClientProcess />
+    <Layout />
   </div>
 );
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+
+const Dashboard = () => {
+  return <div>Dashboard</div>;
+};
+
+const Questions = () => {
+  return <div>Questions</div>;
+};
+
+const Settings = () => {
+  return <div>Settings</div>;
+};
+
+const NotFound = () => {
+  return <div>Not Found</div>;
+};
+
+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 <Component />;
+};
diff --git 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) => (
                     <a
                       key={item.name}
-                      href={item.href}
+                      href={`#${item.href}`}
                       className={classNames(
                         pathname === item.href
                           ? "border-slate-500 text-gray-900"
@@ -147,7 +148,7 @@ export default function Navbar({ user }: { user: any }) {
                 <Disclosure.Button
                   key={item.name}
                   as="a"
-                  href={item.href}
+                  href={`#${item.href}`}
                   className={classNames(
                     pathname === item.href
                       ? "bg-slate-50 border-slate-500 text-slate-700"

diff --git a/src/index.html b/src/index.html
@@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Hello World!</title>
-  </head>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Hello World!</title>
+
+<body>
+  <div id="root"></div>
+</body>
+</head>
+
+</html>
diff --git a/yarn.lock b/yarn.lock
@@ -657,6 +657,11 @@
     unbzip2-stream "1.4.3"
     yargs "17.7.2"
 
+"@remix-run/[email protected]":
+  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"
+
+[email protected]:
+  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"