feat: use client route instead of href

ziteh · Sep 17, 2024 · 3eeac32 · 3eeac32
1 parent 8264a64
commit 3eeac32
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/app/components/appLayout/topbar/index.tsx b/app/components/appLayout/topbar/index.tsx
@@ -18,6 +18,7 @@ import SearchIcon from "@mui/icons-material/Search";
 import HomeIcon from "@mui/icons-material/Home";
 import { Tag, TagRelationChain, SimpleTag } from "@/app/lib/types";
 import { useTagTreeState } from "@/app/store/tagTree";
+import { useRouter } from "next/navigation";
 
 const Search = styled("div")(({ theme }) => ({
   position: "relative",
@@ -68,9 +69,10 @@ interface Props {
 
 export default function Topbar(props: Props) {
   const { isDesktop, onClick } = props;
-  const { selectedTagId } = useTagTreeState();
+  const { selectedTagId, updateSelectedTagId } = useTagTreeState();
   const [parents, setParents] = useState<SimpleTag[]>([]);
   const [tag, setTag] = useState<SimpleTag | null>(null);
+  const router = useRouter();
 
   useEffect(() => {
     updateTag(selectedTagId);
@@ -91,6 +93,11 @@ export default function Topbar(props: Props) {
     setTag(data.self);
   };
 
+  const onBreadcrumbNav = (id: number) => {
+    updateSelectedTagId(id);
+    router.push(`/explorer/${id}`);
+  };
+
   return (
     <Box sx={{ flexGrow: 1 }}>
       <AppBar
@@ -104,21 +111,29 @@ export default function Topbar(props: Props) {
                 <MenuIcon />
               </IconButton>
             )}
-            <Link underline="none" color="inherit" href="/explorer/1">
+            <Link
+              underline="none"
+              color="inherit"
+              onClick={() => onBreadcrumbNav(1)}
+            >
               Hie
             </Link>
           </Box>
           <Box sx={{ flexGrow: 1 }}>
             <Breadcrumbs>
-              <Link underline="none" color="inherit" href="/explorer">
+              <Link
+                underline="none"
+                color="inherit"
+                onClick={() => onBreadcrumbNav(1)}
+              >
                 <HomeIcon fontSize="small" />
               </Link>
               {parents.map((p, i) => (
                 <Link
                   key={i}
                   underline="hover"
                   color="inherit"
-                  href={`/explorer/${p.id}`}
+                  onClick={() => onBreadcrumbNav(p.id)}
                 >
                   {p.name}
                 </Link>

diff --git a/app/explorer/[tag]/page.tsx b/app/explorer/[tag]/page.tsx
@@ -8,11 +8,14 @@ import { getTag } from "@/app/lib/tags";
 import HomeIcon from "@mui/icons-material/Home";
 import LocalOfferIcon from "@mui/icons-material/LocalOffer";
 import { useTagTreeState } from "@/app/store/tagTree";
+import { useRouter } from "next/navigation";
 
 export default function Page({ params }: { params: { tag: string } }) {
   const [children, setChildren] = useState<SimpleTag[]>([]);
   const { updateSelectedTagId } = useTagTreeState();
 
+  const router = useRouter();
+
   useEffect(() => {
     updateTag();
   }, []);
@@ -31,13 +34,19 @@ export default function Page({ params }: { params: { tag: string } }) {
     setChildren(data.children);
   };
 
+  const onChildClick = (id: number) => {
+    updateSelectedTagId(id);
+    router.push(`/explorer/${id}`);
+  };
+
   return (
     <div>
       {children.map((c, i) => (
         <Button
           key={i}
           startIcon={<LocalOfferIcon />}
-          href={`/explorer/${c.id}`}
+          // href={`/explorer/${c.id}`}
+          onClick={() => onChildClick(c.id)}
         >
           {c.name}
         </Button>