fix: pass in full pathname + search in TSR to avoid trailing slashes (#1217)

Author: franky47

packages/e2e/tanstack-router/cypress/e2e/trailing-slash.cy.ts

@@ -0,0 +1,12 @@
+it('does not append a trailing slash', () => {
+  cy.visit('/trailing-slash')
+  cy.location('pathname').should('eq', '/trailing-slash')
+  cy.contains('Set declared').click()
+  cy.location('pathname').should('eq', '/trailing-slash')
+  cy.contains('Clear').click()
+  cy.location('pathname').should('eq', '/trailing-slash')
+  cy.contains('Set undeclared').click()
+  cy.location('pathname').should('eq', '/trailing-slash')
+  cy.contains('Clear').click()
+  cy.location('pathname').should('eq', '/trailing-slash')
+})

packages/e2e/tanstack-router/src/routes/trailing-slash.tsx

@@ -0,0 +1,50 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { createStandardSchemaV1, parseAsString, useQueryStates } from 'nuqs'
+
+const declared = {
+  declared: parseAsString
+}
+const undeclared = {
+  undeclared: parseAsString
+}
+
+const searchParams = {
+  ...declared,
+  ...undeclared
+}
+
+export const Route = createFileRoute('/trailing-slash')({
+  validateSearch: createStandardSchemaV1(declared, {
+    partialOutput: true
+  }),
+  component: TrailingSlashTest
+})
+
+function TrailingSlashTest() {
+  const [{ declared, undeclared }, setSearchParams] =
+    useQueryStates(searchParams)
+  return (
+    <div>
+      <button
+        onClick={() => {
+          setSearchParams({
+            declared: 'pass'
+          })
+        }}
+      >
+        Set declared
+      </button>
+      <button
+        onClick={() => {
+          setSearchParams({
+            undeclared: 'pass'
+          })
+        }}
+      >
+        Set undeclared
+      </button>
+      <button onClick={() => setSearchParams(null)}>Clear</button>
+      <pre>{JSON.stringify({ declared, undeclared }, null, 2)}</pre>
+    </div>
+  )
+}

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

@@ -1,23 +1,18 @@
-import { useLocation, useMatches, useNavigate } from '@tanstack/react-router'
+import { useLocation, useNavigate } from '@tanstack/react-router'
 import { startTransition, useCallback, useMemo } from 'react'
 import { renderQueryString } from '../lib/url-encoding'
 import { createAdapterProvider, type AdapterProvider } from './lib/context'
 import type { AdapterInterface, UpdateUrlFunction } from './lib/defs'
 
 function useNuqsTanstackRouterAdapter(watchKeys: string[]): AdapterInterface {
+  const pathname = useLocation({ select: state => state.pathname })
   const search = useLocation({
     select: state =>
       Object.fromEntries(
         Object.entries(state.search).filter(([key]) => watchKeys.includes(key))
       )
   })
   const navigate = useNavigate()
-  const from = useMatches({
-    select: matches =>
-      matches.length > 0
-        ? (matches[matches.length - 1]?.fullPath as string)
-        : undefined
-  })
   const searchParams = useMemo(
     () =>
       // search is a Record<string, string | number | object | Array<string | number>>,
@@ -56,20 +51,18 @@ function useNuqsTanstackRouterAdapter(watchKeys: string[]): AdapterInterface {
           // TBC if it causes issues with consuming those search params
           // in other parts of the app.
           //
-          // When we clear the search, passing an empty string causes
-          // a type error and possible basepath issues, so we switch it to '.' instead.
-          // See https://github.com/47ng/nuqs/pull/953#issuecomment-3003583471
-          to: renderQueryString(search) || '.',
-          // `from` will be handled by tanstack router match resolver, code snippet:
-          // https://github.com/TanStack/router/blob/5d940e2d8bdb12e213eede0abe8012855433ec4b/packages/react-router/src/link.tsx#L108-L112
-          ...(from ? { from } : {}),
+          // Note: we need to specify pathname + search here to avoid TSR appending
+          // a trailing slash to the pathname, see https://github.com/47ng/nuqs/issues/1215
+          from: '/',
+          to: pathname + renderQueryString(search),
           replace: options.history === 'replace',
           resetScroll: options.scroll,
-          hash: prevHash => prevHash ?? ''
+          hash: prevHash => prevHash ?? '',
+          state: state => state
         })
       })
     },
-    [navigate, from]
+    [navigate, pathname]
   )
 
   return {