Query Parameters Duplication with Hash Anchor in URLs

Context

What's your version of nuqs?

"next-usequerystate": "^1.13.0"

Next.js information (obtained by running next info):

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32458
  Available CPU cores: 20
Binaries:
  Node: 20.9.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.14 // Latest available version is detected (14.2.14).
  eslint-config-next: 14.2.14
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.0.4
Next.js Config:
  output: standalone

Are you using:

✅ The app router
❌ The pages router
❌ The basePath option in your Next.js config
❌ The experimental windowHistorySupport flag in your Next.js config

Description

When using next-usequerystate with the app router in a Next.js project, the URL gets duplicated with the anchor multiple times when updating query parameters. For example, when navigating to /course/scratch#signup and then updating the query state with useQueryState, the URL appends the anchor #signup again and again, resulting in something like:

/course/scratch#signup#signup#signup?location=online&group=29235#signup#signup

I expected useQueryState to update the query parameters without duplicating the anchor in the URL.

Reproduction

Steps to reproduce the behavior:

Navigate to /course/scratch#signup.
Use useQueryState to update the query parameters (e.g., setting location or group).
The URL will have duplicate #signup anchors.

Example code:

const [queryLocation, setQueryLocation] = useQueryState("location", parseAsStringEnum<Location>(["online", "titan"]));
const [queryGroup, setQueryGroup] = useQueryState("group", parseAsInteger);

useEffect(() => {
  setQueryLocation("online");
  setQueryGroup(29235);
}, []);

Expected behavior:

URL should only have one anchor (#signup), and query parameters should be updated correctly.

Actual behavior:

The anchor (#signup) is duplicated multiple times in the URL.

47ng / nuqs