Nested file route not create nested routes
Why this happens? It will help me implement breadcrumbs, as each nested layout could be an item on the breadcrumb.
This route file structure should produce something like this:
with that, I could easily create a breadcrumb
home (area-reservada) > posto-controlo > credenciacoes
16 Replies
useful-bronze•2y ago
The screenshots aren't the greatest to figuring out what's going on.
Could you please condense this into a Stackblitz reproduction so it can we looked at.
Router Stackblitz Starter
You don't need to port over everything, just create the folders and route files as you have them, and tell me exactly what the URL you are trying to achieve is (eg:
/dashboard/invoices/1/edit).StackBlitz
Router Quickstart File Based Example - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
extended-salmonOP•2y ago
You're totally right, sorry about that, I'll create it and share it here once it's done.
Thanks.
extended-salmonOP•2y ago
Here it is, as you can see, the routes are not nested and that cause the breadcrumb component to not render each element. https://stackblitz.com/edit/github-uzrlfz?file=src%2Fcomponents%2FBreadcrumbs.tsx
One example would be the route
authors/$id/books/$id generate a breadcrumb / > / > authors > author > books > bookRui Araújo
StackBlitz
Router Quickstart File Based Example - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
useful-bronze•2y ago
Sorry, was busy. Taking a look at it.
extended-salmonOP•2y ago
np, thank you for helping 🙂
useful-bronze•2y ago
Looks like it had to do with the <Outlet /> not being rendered at the
routes.
https://stackblitz.com/edit/github-uzrlfz-nvihxs?file=src%2Froutes%2F__root.tsx
I also did abit of filtering to remove the unneeded _root route and layout route match.
Also, quick tip, you may was to use named path params like authorId & bookId instead of id since there's quite a bit of ambiguity there.Sean Cassiere
StackBlitz
ruiaraujo012 Tanstack Router Breadcrumbs - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
extended-salmonOP•2y ago
I've filtered the root route as well on my codebase, and yes, id is a little ambiguous.
I've tried that aproach on my codebase, but that comes with one "problem", now I have 2 routes for the "same" pathname
/private/authors/2/books <-(unwanted) and /private/authors/2/books/
useful-bronze•2y ago
I think you'll need to play around with the filtering for that.
the matches are all the matches that are currently being matched.
maybe try using the static route data stuff to opt it out and then filter based on that?
useful-bronze•2y ago
Static Route Data | TanStack Router Docs
When creating routes, you can optionally specify a staticData property in the route's options. This object can literally contain you want it to be as long as it's synchronous available when you create your route.
In addition to being able to access this data from the route itself, you can also access it from any match under the match.staticDat...
extended-salmonOP•2y ago
one thing could be something like index.route.tsx, but without layout being applied.
useful-bronze•2y ago
Possible i guess, its one of those things where the data is there. you just to be filter it down to exactly what you need.
extended-salmonOP•2y ago
i can do that, other thing i could do is to group all pathnames by its parents, like creating a tree of pathname slicing by the
/, and then create the breadcrumbs only with the pathnames that matter.useful-bronze•2y ago
Yup... Different ways to slice to same pie 😉
extended-salmonOP•2y ago
I've already implemented a version where I pass the tree (manually created) through the route context, but I'll explore the options to try that the breadcrumbs are "automatically created", something like this.
But now I'm thinking, should it be a context or a staticData? What's the real difference between each? (I've read the docs 😅 )
useful-bronze•2y ago
Oh, I was thinking static data for something like
showInBreadcrumbs: true and filter based on that.
But context works too.extended-salmonOP•2y ago
Thank you so much @Sean Cassiere, you really helped, I'll work around what we talked 🙂