Is there a way to pass data when navigating?
Use case: on a page (parent) I have two tabs with inside a button each that navigate to a specific child page.
From the child I want to navigate back but I also want to land in the right parent tab.
How can I pass this info during the navigate? I attemped a hack with query params + route masking but I wish there was an easier way.
9 Replies
afraid-scarletOP•2y ago
I found this solution: https://github.com/TanStack/router/discussions/1342#discussioncomment-8848490
With
HistoryState defined globally. We still cannot make it per-route, right?absent-sapphire•2y ago
Shouldn’t the tab state be a path or search parameter?
afraid-scarletOP•2y ago
Can be a search parameter, yes 🤔
On a similar case I handled it like that but the end user didn't want to see it in the URL so I used route masking to hide it
If there's a simple way to just pass data from route to route it would be easier.
On a completely different scenario I need to pass a string (name of an item from a selected row in a table). I can do the same trick or pass it in query params but sending it during the navigation seems easier to me. Or maybe it is an anti-pattern?
absent-sapphire•2y ago
They didn’t want to see it in the url ?!
I can’t say that’s a request I would ever entertain
Why not just use a state manager for everything?
If it’s not supposed to be in the URL, that’s the equivalent
afraid-scarletOP•2y ago
Yeah for the tab scenario I should definitely insist that it's totally fine to have it in the URL 😄
But what about the other scenario? Do you think in general is better to avoid sending data in navigation and find other ways as much as possible?
correct-apricot•2y ago
For "passing data from route to route", you best bets really are either using the URL search parameters or using your own tracked global state (or localized React context).
afraid-scarletOP•2y ago
Sorry if I insist but what are the downsides of using
state during navigate and useRouterState in the target? I gave it a try to the solution you proposed in the github discussion and it is working fine. In general I think it can be an interesting topic to expand in the docs.
In any case thanks for the answer, search params or global state/context totally make sense, I just like to dig as deep as I can (or as longs you're not annoyed by my questions 😂 )correct-apricot•2y ago
We've generally chosen to not really go too deep into explaining the
state field (from the HistoryAPI) due to its sort of magic nature. The state really exists only in a single tab, with it sometimes being allowed to be sent to another using a link click. Its unpredictable nature also makes it so that it most of the time is just undefined.
Most of the time, people use the state field to try to pass data between routes (post data, user data, etc.) and sometimes in some anti-patterns that can become incredibly difficult to backtrack from. This data can almost always we solved in a more user controlled space like search or path params, or in a global or local state machine.
And this is before you bring SSR into the conversation, because now create a situation where the state is available on the client but not the server.
I'm sure we could come up with solutions that'd solve these hurdles, but currently, we have more solid and user controlled workarounds that work.afraid-scarletOP•2y ago
Crystal clear! Thank you so much for the explanation 😄