TanStack / TanStack/router

Search params before hash and after hash are overlapping

Open
#4,370 8 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Which project does this relate to?

Router

Describe the bug

When I navigate into my website, I have some search parameters that I'm setting before the hash, and after the hash. This combo is out of my control, and I have to accept them in both the places.
I'm running into the issue of the first prehash search parameter being appended onto the hash search parameters and this is causing a bug where they're overlapping.
This leads to the search params missing the first param in the url since its appended to the last one in the hash.

Your Example Website or App

https://stackblitz.com/edit/github-ujeikeh5-5dbeecbk?file=src%2Froutes%2Fabout.tsx

Steps to Reproduce the Bug or Issue
  1. Go to the stackblitz url
  2. Go to the home page
  3. Click the link 'Go to about with a link'
  4. Open tanstack router devtools on the bottom right
  5. See that the search params have posthashParam2: "test2?preHashParam=prehashtest"
Expected behavior

As a user, I'm expecting to see the search params be seperate instead of appended together.

For example
http://localhost:8091/?preHashParam=prehashtest#/about?postHashParam1=test1&posthashParam2=test2
Gives me the search params

postHashParam1: "test1"
posthashParam2: "test2?preHashParam=prehashtest"

instead of

postHashParam1: "test1"
posthashParam2: "test2
preHashParam: "prehashtest"

Screenshots or Videos

No response

Platform
  • OS: macOS
  • Browser: Chrome
Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the StackBlitz reproduction and follow the navigation from the home page to the about route. Inspect how TanStack Router parses search parameters before and after the hash, then verify that pre-hash and post-hash parameters remain separate and match the expected URL example.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.