fascinating-indigo

Multiple path params?

I'm having trouble with multiple path params. I have a wiki structure, e.g.

handbook.tsx
handbook.$slug.tsx
handbook.$slug.$slug.tsx

handbook.tsx
handbook.$slug.tsx
handbook.$slug.$slug.tsx

A route can be a page or a sub-page. The first level of pages works fine, but subpages do not. When I console.log Route.params in the child page route file, I only get the first level slug, not the second. When I navigate to "handbook/my-page/my-subpage", I get a 404. When I navigate to "handbook/my-page", I get the correct page. Any ideas on how I can implement this? Thanks

9 Replies

national-gold•9mo ago

please provide a minimal complete example by forking an existing example on stackblitz

plain-purple•9mo ago

@bradstewart If i remember correctly, you need to rename the file to handbook.$slug.index.tsx

fascinating-indigoOP•9mo ago

Thanks for the replies. @FridgeTiger I tried that but it didn't work. @Manuel Schiller I've created a minimal example here https://stackblitz.com/edit/tanstack-router-bfnsppi5?file=src%2Fmain.tsx I'd appreciate any help getting this to work.

Brad Stewart

StackBlitz

Tanstack Router nested params question - StackBlitz

Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz

national-gold•9mo ago

you need to either define multiple path params (you only have a single one in your example) or use the splat definition which is just $

national-gold•9mo ago

https://tanstack.com/router/v1/docs/framework/react/guide/routing-concepts#splat--catch-all-routes

Routing Concepts | TanStack Router React Docs

TanStack Router supports a number of powerful routing concepts that allow you to build complex and dynamic routing systems with ease. Each of these concepts is useful and powerful, and we'll dive into...

fascinating-indigoOP•9mo ago

I tried the splat method that but then no route matches. Can you please explain in more detail how you would solve this? I'd rather not create identical route files for each level of the data tree.

national-gold•9mo ago

what do you mean by "no route matches" ?

fascinating-indigoOP•9mo ago

I mean 404 for every 'route' I fixed the example - not sure if it's the best way but it works https://stackblitz.com/edit/tanstack-router-bfnsppi5?file=src%2Froutes%2Fhandbook.%24.tsx

Brad Stewart

StackBlitz

Tanstack Router nested params question - StackBlitz

Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz

national-gold•9mo ago

looks good to me

Gaming

Programming

Multiple path params?

Did you find this page helpful?