J'ai découvert ce hook il y a quelques jours sur le Discord de Remix .
Encore mieux que le hook useSearchParams() , qui permet de modifier les paramètres dans l'URL. Il effectue également un rechargement des données côté serveur (et donc, de la page).
Je souhaitais éviter de recharger la page à chaque fois, et j'ai découvert useUpdateQueryStringWithoutNavigation .
Lien vers le hook : https://github.com/kentcdodds/kentcdodds.com/blob/main/app/utils/misc.tsx#L299
useUpdateQueryStringValueWithoutNavigation.tsx
function useUpdateQueryStringValueWithoutNavigation (
const currentSearchParams = new URLSearchParams ( window . location . search )
const oldQuery = currentSearchParams . get ( queryKey ) ?? ''
if ( queryValue === oldQuery ) return
currentSearchParams . set ( queryKey , queryValue )
currentSearchParams . delete ( queryKey )
const newUrl = [ window . location . pathname , currentSearchParams . toString ()]
// alright, let's talk about this...
// Normally with remix, you'd update the params via useSearchParams from react-router-dom
// and updating the search params will trigger the search to update for you.
// However, it also triggers a navigation to the new url, which will trigger
// the loader to run which we do not want because all our data is already
// on the client and we're just doing client-side filtering of data we
// already have. So we manually call `window.history.pushState` to avoid
// the router from triggering the loader.
window . history . replaceState ( null , '' , newUrl )
}, [ queryKey , queryValue ])