Dynamic breadcrumbs
I have a project route (
/projects/123) which can be navigated to from 2 different routes (/projects and /customers/456). Depending on the route I have come from, the breadcrumbs in the project route should show the correct previous route.
Is there a standard for how to implement this? If I store it in a context, then what happens when someone refreshes the page? If I use localstaorage instead, there could be multiple tabs to track which can make it a bit more complicated.
I just want to make sure I am doing everything right from the start with tanstack router. I need this for the project route today but what if I need it for some other route in the future? How should I be configuring things?6 Replies
flat-fuchsia•16mo ago
which context would you use? a react context?
like-goldOP•16mo ago
That was one thought..
How would you approach this?
flat-fuchsia•16mo ago
not sure.
"what happens when someone refreshes the page"
also what happens if someone directly comes to that page by a link?
if the path the user travelled to that page is relevant, you could put it in search params
like-goldOP•16mo ago
I think in both of those 2 approaches (refresh or go to a page from a link) would have to be considered the same. The reality is that in my app people will rarely share links..
Or actually thinking about it a bit more, I only want to retain context between page reloads. So if they close the tab and come back to the same page or if they refresh the page, it should use a default breadcrumb.
So in such a situation would you recommend a react context?
flat-fuchsia•16mo ago
you could also put it into the
state param of useNavigate / <Link > https://tanstack.com/router/latest/docs/framework/react/api/router/ToOptionsTypeToOptions type | TanStack Router React Docs
The ToOptions type contains several properties that can be used to describe a router destination.
`tsx
flat-fuchsia•16mo ago
but a react context should just work fine