test: Reuse the route component in React Router v6

packages/e2e/react-router/v6/cypress/e2e/repro-862.cy.ts

@@ -0,0 +1,36 @@
+/// <reference types="cypress" />
+
+import { createTest } from 'e2e-shared/create-test'
+
+const testRepro862RouteComponentReuse = createTest(
+  'Repro for issue #862 - Route component reuse',
+  ({ path }) => {
+    it('clears state when navigating to another route with the same component but no search params', () => {
+      cy.visit(path)
+      cy.contains('#hydration-marker', 'hydrated').should('be.hidden')
+      cy.get('#setup').click()
+      cy.get('#navigate-clear').click()
+      cy.get('#state').should('be.empty')
+      cy.location('search').should('be.empty')
+    })
+
+    it('persists state when navigating to another route with the search params in the target navigation', () => {
+      cy.visit(path)
+      cy.contains('#hydration-marker', 'hydrated').should('be.hidden')
+      cy.get('#setup').click()
+      cy.get('#navigate-persist').click()
+      cy.get('#state').should('have.text', 'pass')
+      cy.location('search').should('eq', '?test=pass')
+    })
+  }
+)
+
+testRepro862RouteComponentReuse({
+  path: '/repro-862/useQueryState',
+  hook: 'useQueryState'
+})
+
+testRepro862RouteComponentReuse({
+  path: '/repro-862/useQueryStates',
+  hook: 'useQueryStates'
+})

packages/e2e/react-router/v6/src/react-router.tsx

@@ -6,6 +6,10 @@ import {
   RouterProvider
 } from 'react-router-dom'
 import RootLayout from './layout'
+import {
+  Repro862UseQueryState,
+  Repro862UseQueryStates
+} from './routes/repro-862'
 
 // Adapt the RRv7 / Remix default export for component into a Component export for v6
 function load(mod: Promise<{ default: any; [otherExports: string]: any }>) {
@@ -47,7 +51,11 @@ const router = createBrowserRouter(
       <Route path="render-count/:hook/:shallow/:history/:startTransition/async-loader"  lazy={load(import('./routes/render-count.$hook.$shallow.$history.$startTransition.async-loader'))} />
 
       {/* Reproductions */}
-      <Route path='repro-839'   lazy={load(import('./routes/repro-839'))} />
+      <Route path="repro-839"   lazy={load(import('./routes/repro-839'))} />
+      <Route path="repro-862/useQueryState"  index element={<Repro862UseQueryState  targetPath="/repro-862/useQueryState/other"  />} />
+      <Route path="repro-862/useQueryState/other"  element={<Repro862UseQueryState  targetPath="/repro-862/useQueryState"        />} />
+      <Route path="repro-862/useQueryStates" index element={<Repro862UseQueryStates targetPath="/repro-862/useQueryStates/other" />} />
+      <Route path="repro-862/useQueryStates/other" element={<Repro862UseQueryStates targetPath="/repro-862/useQueryStates"       />} />
     </Route>
   ))
 

packages/e2e/react-router/v6/src/routes/repro-862.tsx

@@ -0,0 +1,55 @@
+import { parseAsString, useQueryState, useQueryStates } from 'nuqs'
+import { useNavigate } from 'react-router-dom'
+
+type Repro862Props = {
+  targetPath: string
+}
+
+export function Repro862UseQueryState({ targetPath }: Repro862Props) {
+  const navigate = useNavigate()
+  const [state, setState] = useQueryState('test')
+  return (
+    <>
+      <button id="setup" onClick={() => setState('pass')}>
+        Setup
+      </button>
+      <button id="navigate-clear" onClick={() => navigate(targetPath)}>
+        Navigate to {targetPath}
+      </button>
+      <button
+        id="navigate-persist"
+        onClick={() => navigate(targetPath + '?test=pass')}
+      >
+        Navigate to {targetPath + '?test=pass'}
+      </button>
+      <pre id="state">{state}</pre>
+    </>
+  )
+}
+
+export function Repro862UseQueryStates({ targetPath }: Repro862Props) {
+  const navigate = useNavigate()
+  const [{ state }, setState] = useQueryStates(
+    {
+      state: parseAsString
+    },
+    { urlKeys: { state: 'test' } }
+  )
+  return (
+    <>
+      <button id="setup" onClick={() => setState({ state: 'pass' })}>
+        Setup
+      </button>
+      <button id="navigate-clear" onClick={() => navigate(targetPath)}>
+        Navigate to {targetPath}
+      </button>
+      <button
+        id="navigate-persist"
+        onClick={() => navigate(targetPath + '?test=pass')}
+      >
+        Navigate to {targetPath + '?test=pass'}
+      </button>
+      <pre id="state">{state}</pre>
+    </>
+  )
+}