feat: support search parameters

example/app/demo/page.tsx

@@ -1,11 +1,18 @@
 import Image from "next/image";
 import { ButtonLink } from "@/components/button";
 import { Title } from "@/components/title";
+import { Back } from "@/components/back";
 import { Reveal } from "@/components/reveal";
 import demoImage from "@/assets/image.jpg";
 import Link from "next/link";
 
-export default function DemoPage() {
+export default async function DemoPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ page: number }>;
+}) {
+  const { page = 0 } = await searchParams;
+
   return (
     <>
       <div className="mx-auto flex h-dvh flex-col items-center justify-center px-8 lg:max-w-[75%] lg:px-16">
@@ -20,10 +27,21 @@ export default function DemoPage() {
           </div>
         </Title>
 
-        <div className="relative z-50">
+        <div className="relative z-50 flex flex-col items-center gap-8">
           <ButtonLink href="/" back>
-            Back
+            Home
           </ButtonLink>
+
+          <div className="flex gap-8 text-xl font-medium uppercase text-white">
+            <span>Current: {page}</span>
+            <Link href="/demo?page=1" className="underline underline-offset-4">
+              Page 1
+            </Link>
+            <Link href="/demo?page=2" className="underline underline-offset-4">
+              Page 2
+            </Link>
+            <Back />
+          </div>
         </div>
       </div>
 

example/components/back.tsx

@@ -7,7 +7,7 @@ export function Back() {
 
   return (
     <button onClick={back} className="underline underline-offset-4">
-      back
+      ← back
     </button>
   );
 }

src/context.tsx

@@ -7,9 +7,10 @@ import {
   useMemo,
   useRef,
   useState,
+  Suspense,
 } from "react";
 import delegate, { DelegateEvent } from "delegate-it";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { NavigateOptions } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { isModifiedEvent } from "./utils";
 
@@ -55,10 +56,15 @@ export function TransitionRouter({
   const pathname = usePathname();
 
   const [stage, setStage] = useState<Stage>("none");
+  const [pathWithSearch, setPathWithSearch] = useState(() => pathname);
 
   const leaveRef = useRef<(() => void) | void | null>(null);
   const enterRef = useRef<(() => void) | void | null>(null);
 
+  const handlePathChange = useCallback((newPathWithSearch: string) => {
+    setPathWithSearch(newPathWithSearch);
+  }, []);
+
   const navigate: NavigateProps = useCallback(
     async (href, pathname, method = "push", options) => {
       if (stage === "leaving") return Promise.resolve();
@@ -78,15 +84,19 @@ export function TransitionRouter({
       const ignore = anchor?.getAttribute("data-transition-ignore");
 
       const url = href ? new URL(href, window.location.origin) : null;
-      const targetPathname = url?.pathname;
+      const currentUrl = new URL(window.location.href);
+
+      const isSamePage =
+        url?.pathname === currentUrl.pathname &&
+        url?.search === currentUrl.search;
 
       if (
         !ignore &&
         href?.startsWith("/") &&
-        targetPathname !== pathname &&
+        !isSamePage &&
         anchor.target !== "_blank" &&
         !isModifiedEvent(event) &&
-        !(href.includes("#") && targetPathname === pathname)
+        !(href.includes("#") && url?.pathname === pathname)
       ) {
         event.preventDefault();
         navigate(href, pathname);
@@ -128,7 +138,7 @@ export function TransitionRouter({
         setStage("entering");
       }
     };
-  }, [stage, pathname]);
+  }, [stage, pathWithSearch]);
 
   const value = useMemo(
     () => ({ stage, navigate, isReady: stage !== "entering" }),
@@ -137,6 +147,9 @@ export function TransitionRouter({
 
   return (
     <TransitionRouterContext.Provider value={value}>
+      <Suspense fallback={null}>
+        <SearchParamsHandler onPathChange={handlePathChange} />
+      </Suspense>
       {children}
     </TransitionRouterContext.Provider>
   );
@@ -145,3 +158,23 @@ export function TransitionRouter({
 export function useTransitionState() {
   return use(TransitionRouterContext);
 }
+
+function SearchParamsHandler({
+  onPathChange,
+}: {
+  onPathChange: (pathWithSearch: string) => void;
+}) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const pathWithSearch = useMemo(() => {
+    const search = searchParams.toString();
+    return pathname + (search ? `?${search}` : "");
+  }, [pathname, searchParams]);
+
+  useEffect(() => {
+    onPathChange(pathWithSearch);
+  }, [pathWithSearch, onPathChange]);
+
+  return null;
+}