T
TanStack•10mo ago
afraid-scarlet

How to retain only search params of Route

I have two routes where I am using search params for filtering and sorting. The search params between the two routes are completely independent of each other so I would like to only show the search params of the active route in URL while ALSO stripping default params. I'm using the middlewards like so: 
search: {
  middlewares: [stripSearchParams(DefaultSearch), retainSearchParams(true)],
},
search: {
  middlewares: [stripSearchParams(DefaultSearch), retainSearchParams(true)],
},
and have also tried doing 
search: {
  middlewares: [retainSearchParams(['param1']), stripSearchParams(DefaultSearch)],
},
search: {
  middlewares: [retainSearchParams(['param1']), stripSearchParams(DefaultSearch)],
},
but I am still seeing the params from route 1 carry over to route 2. Here is a minimal reproduction of my setup: https://stackblitz.com/edit/tanstack-router-vazxth?file=src%2Froutes%2Findex.tsx You'll notice that when changing between the Home and the About route that the search param of the non active route is displayed
Owen Vey
StackBlitz
retain route params only - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
4 Replies
rising-crimson
rising-crimson•10mo ago
this works: https://stackblitz.com/edit/tanstack-router-xdhfqr?file=src%2Froutes%2Findex.tsx,src%2Froutes%2Fabout.tsx
StackBlitz
retain route params only (forked) - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
afraid-scarlet
afraid-scarletOP•10mo ago
huh, that was the first thing I tried on my own app a while back and it didn't work. Dug some more any maybe found a bug. Check out this repro here https://stackblitz.com/edit/tanstack-router-fyxlu6?file=src%2Froutes%2Fabout.tsx Notice that it works as before and should be the same code you had in your stackblitz above. Then go to the __root.tsx file and uncomment the search={...} lines and notice that the default search values become empty objects. This then causes the stripSearchParams() to break as there is nothing in the DefaultAboutSearch object. Not sure what's happening but maybe something is modifying the value passed into search={...}. Same behavior happen when using a "Clear Search" button like this: 
<Link to={Route.fullPath} search={DefaultAboutSearch}>
  Clear Search
</Link>
<Link to={Route.fullPath} search={DefaultAboutSearch}>
  Clear Search
</Link>
Owen Vey
StackBlitz
default search object becoming empty when used in search - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
rising-crimson
rising-crimson•10mo ago
can you please create a GitHub issue for this so we properly track this?
afraid-scarlet
afraid-scarletOP•10mo ago
Here ya are: https://github.com/TanStack/router/issues/2799
GitHub
Default search becomes empty object when used in search · Issue #...
Which project does this relate to? Router Describe the bug I am using both the stripSearchParams and retainSearchParams middlewares to strip default values from the query params as well as removing...

Did you find this page helpful?