Persist URL Parameter Across Navigations
Hi everyone,
I'm using TanStack Router and I want to set up a specific URL parameter (named commit) at the root route level that should persist across navigations. If the parameter has a value, I want it to be retained automatically when calling the navigate function, without needing to explicitly handle it for each navigation event.
I couldn't find a straightforward way to implement this behavior. Does anyone have suggestions on how to achieve this?
Any help would be appreciated!
7 Replies
plain-purple•12mo ago
Make a custom navigation hook which returns everything that
useNavigate does but with a custom navigate function which accepts the path and query params etc but which would always have the search param commit in the search object like this. This would be the return value of the custom hook.
return {...navigateReturnedValues, navigate:(options) => navigateReturnedValues.navigate({...options, search:{commit:'whatever', ...options.search}})}
The commit value can be something persisted in a global store like Zustand idk or maybe some native Tanstack Router implementation.exotic-emerald•12mo ago
while the custom hook would work, makingit typesafe would be challenging.
@Yonik do you only have that single query parameter? or do other routes have query params as well
deep-jadeOP•12mo ago
@Manuel Schiller exactly what i thought, i tried to make a custom hook in the past and it was challenging from type safety aspect
And no, each route has its own query params, too bad theres no build in solution
exotic-emerald•12mo ago
you coud use query filters
https://tanstack.com/router/latest/docs/framework/react/api/router/RouteOptionsType#presearchfilters-property
however, you would need to add it to each route
TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
exotic-emerald•12mo ago
you can raise a github feature request via github discussion, explain your use case and also some ideas how an API could look like
if you want this feature to be prioritized you can either contribute to the project via a PR or consider sponsoring the project. either way, please get in touch
deep-jade•12mo ago
It's a nice feature. Very useful for public websites that handle multiple parameters. For example: ?filterBy=price and for multiple pages where we have different queries we can filter by price for all of them and if the user updates the filter we can update it too
exotic-emerald•11mo ago
@El Barto @Yonik
this is now implementable via search middlewares
checkout https://tanstack.com/router/latest/docs/framework/react/guide/search-params#transforming-search-with-search-middlewares
TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.