diff --git a/packages/react-router/__tests__/dom/trailing-slashes-test.tsx b/packages/react-router/__tests__/dom/trailing-slashes-test.tsx index f1258bfe69..08fbd94251 100644 --- a/packages/react-router/__tests__/dom/trailing-slashes-test.tsx +++ b/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

👋

; } @@ -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

👋

; } diff --git a/packages/react-router/lib/dom/lib.tsx b/packages/react-router/lib/dom/lib.tsx index 4873b298a7..04df4ec902 100644 --- a/packages/react-router/lib/dom/lib.tsx +++ b/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], ); @@ -2354,7 +2354,7 @@ export type SetURLSearchParams = ( | URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions, -) => void; +) => Promise; /** * Submits a HTML [`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx index fcdfa9b232..cb7d011653 100644 --- a/packages/react-router/lib/hooks.tsx +++ b/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; - (delta: number): void | Promise; + (to: To, options?: NavigateOptions): Promise; + (delta: number): Promise; } 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], diff --git a/packages/react-router/lib/router/router.ts b/packages/react-router/lib/router/router.ts index 3449a2a789..aefb342e8b 100644 --- a/packages/react-router/lib/router/router.ts +++ b/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);