react-router HashRouter support?

[Jungzl]

Context

What's your version of nuqs?

-> https://pkg.pr.new/nuqs@807

What framework are you using?

• ✅ React Router

Which version of your framework are you using?

-> 7.0.2

Description

For some reason, we can't use BrowserRouter in RR7, only HashRouter allowed. But useQueryState always append the whole hash part.

Expect:

http://localhost:5173/#/form
⇓
http://localhost:5173/#/form?keyword=kw
⇓
http://localhost:5173/#/form?keyword=kw1
⇓
http://localhost:5173/#/form?keyword=kw12
⇓
http://localhost:5173/#/form?keyword=kw123

Actual:

http://localhost:5173/#/form
⇓
http://localhost:5173/#/form?keyword=kw#/form
⇓
http://localhost:5173/#/form?keyword=kw1#/form?keyword=kw#/form
⇓
http://localhost:5173/#/form?keyword=kw12#/form?keyword=kw1#/form?keyword=kw#/form
⇓
http://localhost:5173/#/form?keyword=kw123#/form?keyword=kw12#/form?keyword=kw1#/form?keyword=kw#/form

Reproduction

https://github.com/Jungzl/react-router-nuqs-hash-issue

1. go to '/form'
2. type something, press Enter
3. see url

[franky47]

Thanks, I'm going to mark this one as a feature request to support the HashRouter in RRv{6,7}, as the adapters have only been designed for search params in mind (the BrowserRouter).

Fortunately, the change in #800 should make it possible.

See also #206.

[sebbean]

supp future self!

[gsaandy]

Looks like hash router was working fine with nuqs v2.2.1 and react-router v6, but after upgrading to 2.3.1 it is not working anymore. Is this a known issue?
@franky47 looks like a breaking change to me

[franky47]

@gsaandy what about 2.2.2 and 2.2.3? I'm trying to pinpoint what change could have broken it, though my bet is on #811 (so those versions should work, as 811 shipped in 2.3.0).

[gsaandy]

@gsaandy what about 2.2.2 and 2.2.3? I'm trying to pinpoint what change could have broken it, though my bet is on #811 (so those versions should work, as 811 shipped in 2.3.0).

@franky47 - with2.2.3 it seems to be working fine, the problem is with 2.3.x

Also, irrespective of this version and issue, another issue with react router adapter is that we cannot use multiple useQueryState or useQueryStates in a page tree, one would override the other.

const [hello, setHello] = useQueryState('hello', { defaultValue: '' });
  const [count, setCount] = useQueryState(
    'count',
    parseAsInteger.withDefault(0)
  );

see https://stackblitz.com/edit/vitejs-vite-ejjuoacj?file=src%2Fmain.tsx