router icon indicating copy to clipboard operation
router copied to clipboard

Route Masking Causes Duplicate API Requests Due to Search Param Resets

Open doveq opened this issue 1 month ago • 0 comments

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

doveq avatar Nov 28 '25 06:11 doveq