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