From 6618f455ef40a8a3e9d9bd85dd3f1f31996fa68a Mon Sep 17 00:00:00 2001
From: Francois Best <github@francoisbest.com>
Date: Fri, 27 Sep 2024 23:58:49 +0200
Subject: [PATCH] feat: Render pretty URLs in other adapters

---
 packages/nuqs/src/adapters/react-router.ts | 19 +++++++++++++------
 packages/nuqs/src/adapters/react.ts        |  6 +++---
 packages/nuqs/src/adapters/remix.ts        | 19 +++++++++++++------
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/nuqs/src/adapters/react-router.ts b/packages/nuqs/src/adapters/react-router.ts
index 747b23e86..2f4ac2f4e 100644
--- a/packages/nuqs/src/adapters/react-router.ts
+++ b/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,
diff --git a/packages/nuqs/src/adapters/react.ts b/packages/nuqs/src/adapters/react.ts
index 4b530b302..b35818eba 100644
--- a/packages/nuqs/src/adapters/react.ts
+++ b/packages/nuqs/src/adapters/react.ts
@@ -1,5 +1,6 @@
 import mitt from 'mitt'
 import { useEffect, useState } from 'react'
+import { renderQueryString } from '../url-encoding'
 import type { AdapterOptions } from './defs'
 import { createAdapterProvider } from './internal.context'
 
@@ -7,11 +8,10 @@ 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)
 }
 
diff --git a/packages/nuqs/src/adapters/remix.ts b/packages/nuqs/src/adapters/remix.ts
index 1a4199651..0b6ae64a5 100644
--- a/packages/nuqs/src/adapters/remix.ts
+++ b/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,