TanStackT
TanStack•4mo ago•
20 replies
awake-maroon

Multiple optional parameters

Hey everyone! Is it possible to create 2 optional parameters in root with tanstack router? We are rewriting the project and need to preserve the current URL structure. In documentation I found example for i18n https://tanstack.com/router/latest/docs/framework/react/guide/path-params#complex-i18n-patterns
but in my case routes should have both optional language and city. For example ${-$locale}/${-$city}/event/${event-slug}

This should support URLs like:
/it/rome/event/andrea-bocelli // both locale and city
/fr/paris/event/andrea-bocelli // both locale and city

/it/event/andrea-bocelli // only locale
/fr/event/andrea-bocelli // only locale

/rome/event/andrea-bocelli // only city
/paris/event/andrea-bocelli // only city

/event/andrea-bocelli // not selected locale and city


Static page about working correctly with both optional parameters /it/rome/about /it/about and /about

Event page also working if both parameters exist or none of them /it/rome/event/andrea-bocelli or /event/andrea-bocelli

However with 1 parameter I got not found error /it/event/andrea-bocelli or. /rome/event/andrea-bocelli

Stackblitz with reproduce https://stackblitz.com/edit/tanstack-router-lvn6j2tq?file=src%2Froutes%2F%7B-%24locale%7D%2F%7B-%24city%7D%2Fabout.tsx
Was this page helpful?