feat(react-router): Make navigate and setSearchParams consistently return a Promise<void>

Author: vezaynk

packages/react-router/__tests__/dom/trailing-slashes-test.tsx

@@ -603,10 +603,9 @@ describe("trailing slashes", () => {
 
       function SetSearchParams() {
         let [, setSearchParams] = useSearchParams();
-        React.useEffect(
-          () => setSearchParams({ key: "value" }),
-          [setSearchParams],
-        );
+        React.useEffect(() => {
+          setSearchParams({ key: "value" });
+        }, [setSearchParams]);
         return <h1>👋</h1>;
       }
 
@@ -631,10 +630,9 @@ describe("trailing slashes", () => {
 
       function SetSearchParams() {
         let [, setSearchParams] = useSearchParams();
-        React.useEffect(
-          () => setSearchParams({ key: "value" }),
-          [setSearchParams],
-        );
+        React.useEffect(() => {
+          setSearchParams({ key: "value" });
+        }, [setSearchParams]);
         return <h1>👋</h1>;
       }
 

packages/react-router/lib/dom/lib.tsx

@@ -2313,7 +2313,7 @@ export function useSearchParams(
           : nextInit,
       );
       hasSetSearchParamsRef.current = true;
-      navigate("?" + newSearchParams, navigateOptions);
+      return navigate("?" + newSearchParams, navigateOptions);
     },
     [navigate, searchParams],
   );

packages/react-router/lib/hooks.tsx

@@ -195,8 +195,8 @@ export function useMatch<
  * The interface for the `navigate` function returned from {@link useNavigate}.
  */
 export interface NavigateFunction {
-  (to: To, options?: NavigateOptions): void | Promise<void>;
-  (delta: number): void | Promise<void>;
+  (to: To, options?: NavigateOptions): Promise<void>;
+  (delta: number): Promise<void>;
 }
 
 const navigateEffectWarning =
@@ -355,11 +355,11 @@ function useNavigateUnstable(): NavigateFunction {
 
       // Short circuit here since if this happens on first render the navigate
       // is useless because we haven't wired up our history listener yet
-      if (!activeRef.current) return;
+      if (!activeRef.current) return Promise.resolve();
 
       if (typeof to === "number") {
         navigator.go(to);
-        return;
+        return Promise.resolve();
       }
 
       let path = resolveTo(
@@ -387,6 +387,8 @@ function useNavigateUnstable(): NavigateFunction {
         options.state,
         options,
       );
+
+      return Promise.resolve();
     },
     [
       basename,
@@ -1757,9 +1759,9 @@ function useNavigateStable(): NavigateFunction {
       if (!activeRef.current) return;
 
       if (typeof to === "number") {
-        router.navigate(to);
+        return router.navigate(to);
       } else {
-        await router.navigate(to, { fromRouteId: id, ...options });
+        return router.navigate(to, { fromRouteId: id, ...options });
       }
     },
     [router, id],

packages/react-router/lib/router/router.ts

@@ -1490,7 +1490,7 @@ export function createRouter(init: RouterInit): Router {
             location: nextLocation,
           });
           // Send the same navigation through
-          navigate(to, opts);
+          return navigate(to, opts);
         },
         reset() {
           let blockers = new Map(state.blockers);