Route Masking Causes Duplicate API Requests Due to Search Param Resets #5985
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