From e5f0bdd9cebcae9d7f6b854515fa79951d8ac5c4 Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Wed, 9 Oct 2024 14:24:23 +0200 Subject: [PATCH] fix(routing): manually push changed path (#6385) Instead of using next's `router.push` function, we're transitioning back to `history.pushState`. This works better in many edge cases as it prevents a whole page refresh and rerender. Possible intended side effect of this fix is of course that any global change handlers or code running in render won't run anymore when changing instantsearch state. This can be worked around by using the `onStateChange` function or a middleware. Back navigation still works as expected. --- .../src/useInstantSearchRouting.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/react-instantsearch-nextjs/src/useInstantSearchRouting.ts b/packages/react-instantsearch-nextjs/src/useInstantSearchRouting.ts index 43c306b9aa..78ece087b1 100644 --- a/packages/react-instantsearch-nextjs/src/useInstantSearchRouting.ts +++ b/packages/react-instantsearch-nextjs/src/useInstantSearchRouting.ts @@ -1,6 +1,6 @@ import historyRouter from 'instantsearch.js/es/lib/routers/history'; import { headers } from 'next/headers'; -import { usePathname, useSearchParams, useRouter } from 'next/navigation'; +import { usePathname, useSearchParams } from 'next/navigation'; import { useRef, useEffect } from 'react'; import type { InstantSearchNextProps } from './InstantSearchNext'; @@ -17,7 +17,6 @@ export function useInstantSearchRouting< ) { const pathname = usePathname(); const searchParams = useSearchParams(); - const router = useRouter(); const routingRef = useRef['routing']>(); const onUpdateRef = useRef<() => void>(); @@ -54,7 +53,7 @@ export function useInstantSearchRouting< if (this.isDisposed) { return; } - router.push(url, { scroll: false }); + history.pushState({}, '', url); }; browserHistoryOptions.start = function start(onUpdate) { onUpdateRef.current = onUpdate;