feat: Render pretty URLs in other adapters

47ng · Oct 22, 2024 · 6618f45 · 6618f45
1 parent cb30a20
commit 6618f45
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git 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
@@ -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)
 }
 

diff --git 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,