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

[seanbfuller]

Thanks for the example. This tripped me up a bit also. I found that this structure would get the page to match as I expected:

• clients.$clientId.tsx
• clients.index.tsx
• clients_.$clientId.invoices.$invoiceId.tsx
• clients_.$clientId.invoices.index.tsx

It wasn't immediately apparent to me why I had to add the suffix. Without it, clients.$clientId.invoices.$invoiceId.tsx and clients.$clientId.invoices.index.tsx (note the lack of suffixes) were not matching. They just responded with the clients.$clientId.tsx route.

Here's a quick fork of your example to demonstrate for others running into this:
https://stackblitz.com/edit/tanstack-router-bhkifefb?file=src%2Froutes%2Fclients_.%24clientId.invoices.index.tsx

To see the difference in behavior, remove the suffixes from the second two routes.

Reading back through https://tanstack.com/router/v1/docs/framework/react/guide/route-matching it seems like what's happening is that "clients" is grabbing this and not walking down to the next nested static route. It might be helpful to add this as an example on that page for others.

Thanks!

[adamdrake210]

Oh my god! I have just spent over an hour looking through tanstack router docs and talking to AI and nothing was working. I thought it was some bug. However, adding this '_' to the end of the parent layout totally fixed it!! Thank you 🥳

[fural]

Hi everyone,

If you're interested in combining multiple paths and IDs, here's an example of the file name structure:

_dashboard.dashboard.universe_.$universeId.stars_.$starId.tsx

This would result in the following URL:

http://localhost:5173/dashboard/universe/ce0e6816-019b-4ce9-843b-cf4d51d9e87e/stars/4d0472c2-20a4-4f31-b2c3-4a6acf458c0f

For context, _dashboard serves as the layout in this case.