feat: Render pretty URLs in other adapters

Author: franky47

packages/nuqs/src/adapters/react-router.ts

@@ -1,14 +1,21 @@
-import { useSearchParams } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { renderQueryString } from '../url-encoding'
 import type { AdapterOptions } from './defs'
 import { createAdapterProvider } from './internal.context'
 
 function useNuqsReactRouterAdapter() {
-  const [searchParams, setSearchParams] = useSearchParams()
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
   const updateUrl = (search: URLSearchParams, options: AdapterOptions) => {
-    setSearchParams(search, {
-      replace: options.history === 'replace',
-      preventScrollReset: !options.scroll
-    })
+    navigate(
+      {
+        search: renderQueryString(search)
+      },
+      {
+        replace: options.history === 'replace',
+        preventScrollReset: !options.scroll
+      }
+    )
   }
   return {
     searchParams,

packages/nuqs/src/adapters/react.ts

@@ -1,17 +1,17 @@
 import mitt from 'mitt'
 import { useEffect, useState } from 'react'
+import { renderQueryString } from '../url-encoding'
 import type { AdapterOptions } from './defs'
 import { createAdapterProvider } from './internal.context'
 
 const emitter = mitt<{ update: URLSearchParams }>()
 
 function updateUrl(search: URLSearchParams, options: AdapterOptions) {
   const url = new URL(location.href)
-  url.search = search.toString()
-  const href = url.toString()
+  url.search = renderQueryString(search)
   const method =
     options.history === 'push' ? history.pushState : history.replaceState
-  method.call(history, history.state, '', href)
+  method.call(history, history.state, '', url)
   emitter.emit('update', search)
 }
 

packages/nuqs/src/adapters/remix.ts

@@ -1,14 +1,21 @@
-import { useSearchParams } from '@remix-run/react'
+import { useNavigate, useSearchParams } from '@remix-run/react'
+import { renderQueryString } from '../url-encoding'
 import type { AdapterOptions } from './defs'
 import { createAdapterProvider } from './internal.context'
 
 function useNuqsRemixAdapter() {
-  const [searchParams, setSearchParams] = useSearchParams()
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
   const updateUrl = (search: URLSearchParams, options: AdapterOptions) => {
-    setSearchParams(search, {
-      replace: options.history === 'replace',
-      preventScrollReset: !options.scroll
-    })
+    navigate(
+      {
+        search: renderQueryString(search)
+      },
+      {
+        replace: options.history === 'replace',
+        preventScrollReset: !options.scroll
+      }
+    )
   }
   return {
     searchParams,