TanStack / TanStack/router

Route Masking Causes Duplicate API Requests Due to Search Param Resets

Open
#5,985 0 comments 0 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

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.

Image
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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.