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:
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.tsx8 Replies
exotic-emerald•2mo ago
Path Params | TanStack Router React Docs
Path params are used to match a single segment (the text until the next /) and provide its value back to you as a named variable. They are defined by using the $ character prefix in the path, followed...
exotic-emerald•2mo ago
seems like it should be possible
unless there is a bug
or it's an ambiguity issue
well, yes in fact, it must be that
if you have only one segment before /event, how would the router know if it should take the place of locale or city
/foo/event/my-event
foo: is it a locale or a city ?
maybe you need a segment between the two params
/{-$locale}/app/{-$city}/event/{-$slug}
narrow-beigeOP•2mo ago
Yeah but I can't do that because that structure exist on current project. Google and other search engines indexed with that URL structure
Interseting that
- /about All of them match
about page working correctly
- /it/rome/about
- /it/about- /about All of them match
about componentexotic-emerald•2mo ago
yeah, that's true
maybe in the case of ambiguity it matches the last segment
but maybe there's a bug when there is a third optional param
narrow-beigeOP•2mo ago
Maybe cause it's working with duplicated directory on first level
{-$locale}/event/{-$slug}
Strange that you need to duplicate dynamic segment but not static onenarrow-beigeOP•2mo ago
Found open pull request with fix for my case. Probably should be working with multiple optional params after merge https://github.com/TanStack/router/pull/5176
GitHub
fix(router-core): optional-path-param usage variation matches by nl...
#4933 highlighted a case where index routes would not resolve when an optional param is followed by a required path param. this pr resolves #4933
apart from this specific issue, this PR updates isM...
other-emerald•2mo ago
cc @Nico Lynzaad can you please add a test case for the above to your PR?
also, what's holding this PR back? let me knof if you need anything
sunny-green•3w ago
I've managed to clone the ts router repo, apply the changes from that PR, build and patch node_modules in my project with that built stuff with
bun patch .... It works but the types are not happy.
@Daniyar Kosmuratov If your case is urgent I guess you could do that too, on your own risk..