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
_28 function useUpdateQueryStringValueWithoutNavigation(
_28 React.useEffect(() => {
_28 const currentSearchParams = new URLSearchParams(window.location.search)
_28 const oldQuery = currentSearchParams.get(queryKey) ?? ''
_28 if (queryValue === oldQuery) return
_28 currentSearchParams.set(queryKey, queryValue)
_28 currentSearchParams.delete(queryKey)
_28 const newUrl = [window.location.pathname, currentSearchParams.toString()]
_28 // alright, let's talk about this...
_28 // Normally with remix, you'd update the params via useSearchParams from react-router-dom
_28 // and updating the search params will trigger the search to update for you.
_28 // However, it also triggers a navigation to the new url, which will trigger
_28 // the loader to run which we do not want because all our data is already
_28 // on the client and we're just doing client-side filtering of data we
_28 // already have. So we manually call `window.history.pushState` to avoid
_28 // the router from triggering the loader.
_28 window.history.replaceState(null, '', newUrl)
_28 }, [queryKey, queryValue])
