Preserve query params on top navigation

GovNFT · Jul 22, 2024 · 8f5df63 · 8f5df63
1 parent f293696
commit 8f5df63
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/components/NavLink.tsx b/src/components/NavLink.tsx
@@ -1,9 +1,9 @@
 import { Button } from "flowbite-react";
-import { useLocation } from "wouter";
+import { useSearchParams } from "#/hooks/searchParams";
 
 export default function NavLink({ href, children, useButton = false, ...opts }) {
   const LinkComponent = useButton ? Button : "a";
-  const [_location, navigate] = useLocation();
+  const [, , navigate] = useSearchParams();
   const goTo = (event, ref) => {
     if (navigate) {
       event.preventDefault();

diff --git a/src/hooks/searchParams.ts b/src/hooks/searchParams.ts
@@ -14,5 +14,13 @@ export function useSearchParams() {
     [location, navigate],
   );
 
-  return [searchParams, setSearchParams] as const;
+  const handleNavigate = useCallback(
+    (href: string, preserveParams = true) => {
+      const params = preserveParams ? `?${search}` : "";
+      navigate(`${href}${params}`);
+    },
+    [navigate, search],
+  );
+
+  return [searchParams, setSearchParams, handleNavigate] as const;
 }