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

[gsaandy]

@franky47 - is this taken care in the latest version?

[franky47]

No, HashRouter support will likely need its own adapter due to the different storage mechanism being used (for example, all options and tests involving server-side rendering would fail, due to the hash never being sent to the server).

Contributions are welcome to provide this as a community-based adapter in the mean time (based on the implementation in 2.2.3).