Route Masking Causes Duplicate API Requests Due to Search Param Resets
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
Hello, I'm encountering an issue with route masking that leads to duplicate API calls when a page has search parameters.
When a modal is closed and the navigation returns to the starting page (which has search parameters, e.g., /photos?abc=123), the search parameters undergo a rapid reset.
They briefly change to an empty state {} before returning to their original state {abc: 123}. This fluctuation triggers my data-fetching logic (e.g., a useEffect hook dependent on the search params) twice, resulting in duplicate API requests.
Your Example Website or App
https://stackblitz.com/edit/tanstack-router-dkfz4cs3?file=src%2Fmain.tsx
Steps to Reproduce the Bug or Issue
1, Start on a photos page with search parameters (e.g., /photos?abc=123).
2, Open a modal. This typically changes the URL (e.g., using route masking to /photos/4).
3, Close the modal, which navigates back to the original URL /photos?abc=123.
4, Observed Behavior: The search parameters object in the component briefly becomes {} before stabilizing as {abc: 123}.
Result: This causes a duplicate fetch call.
Expected behavior
When closing the modal and returning to the starting page /photos?abc=123, the search parameters should remain consistent and not reset, preventing the duplicate API request.
Screenshots or Videos
No response
Platform
- Router Version: 1.139.10
- OS: Windows
- Browser: Chrome
- Browser Version: 142.0
- Bundler: vite
- Bundler Version: 7.2.4
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open the linked StackBlitz reproduction and start with src/main.tsx; trace the route-masking close navigation from /photos/4 back to /photos?abc=123 and the search-parameter state transition. Done means the search params do not transiently become {} and the dependent data-fetching logic makes only one request.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100