How to handle multiple path params

[kyusungpark]

Hi, I am looking into Tanstack Router and was wondering what's the best way to handle multiple path params for file based routing.

For example, if I want a path like /schools/:schoolId/courses/:courseId/:test/:testId how should I be structuring my folders/file names?

[schiller-manuel]

it totally depends on your requirements... theoretically you could have a single route that has all of the path params
https://stackblitz.com/edit/tanstack-router-kplaue?file=src%2Froutes%2Fschools.%24schoolId.courses.%24courseId.%24test.%24testId.tsx,src%2Froutes%2F__root.tsx&preset=node

[kyusungpark]

Oh I see, is there a better way that you suggest by any chance other than this that is more manageable?

[ChuckJonas]

There really needs to be better documentation around this. Maybe adding some more "real world" examples here.

@kyusungpark Curious what approach you ended up taking?

[kyusungpark]

I end just using query params with just 1 path param

[ChuckJonas]

@schiller-manuel any additional guidance here?

I've now spent a couple of hours looking for documentation, standards around this and it's very sparse. Overall, the documentation around nested routes feels very lacking, especially so when you add in multiple nested parameters.

A good example is from

/clients
/clients/$clientId
/clients/$clientId/invoices

These 3 routes don't share any components and just need to render the specified route. Instead from what I can tell, you'd only be able to do this by rendering clients -> /clients/$clientId -> /clients/$clientId/invoices via <Outlet />.

This feels like such a fundamental use case for a router that I feel like I must just be missing something...

[schiller-manuel]

These 3 routes don't share any components

what does this mean? you don't want to render the /clients layout on /clients/$clientId ?

if yes, you can opt out of the parent layout using the _ suffix

see https://stackblitz.com/edit/tanstack-router-5ottjuik?file=src%2Froutes%2Fclients.tsx,src%2Froutes%2Fclients_.%24clientId.tsx,src%2Froutes%2Fclients_.%24clientId_.invoices.tsx&preset=node