passive-yellow

Optional path params with groups

Is it possible to use optional path params with route groups so that I don’t have to repeat the param in every route path? In the file based example i tried moving about.tsx into a ({-$locale}) similar to the advanced i18n with route groups example, but it's not matching /test/about like it does when the folder is named {-$locale}. Am I misunderstanding how ({-$locale}) works in route groups?

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...

13 Replies

metropolitan-bronze•2mo ago

why would you need to repeat the path param? can you please show an example?

passive-yellowOP•2mo ago

I created an example here: https://stackblitz.com/edit/tanstack-router-x8wuq99n?file=src%2Froutes%2F(%7B-%24locale%7D)%2Fabout.tsx. I think I’m just not fully understanding how path groups work. What would be the difference between: * {-$locale}/about.tsx vs * ({-$locale})/about.tsx? I would expect both to have access to the $locale param, and the only difference be that with the path group version, I can write:

to: '/about'

to: '/about'

instead of:

to: '/{-$locale}/about'

to: '/{-$locale}/about'

but if i use the option with ({-$locale}) it is not matching urls like /test/about

StackBlitz

Router Quickstart File Based Example (duplicated) - StackBlitz

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

metropolitan-bronze•2mo ago

route groups are pathless they dont contribute to the URL they only allow you to group files in a folder and since they are pathless, they cannot have params

passive-yellowOP•2mo ago

so this is wrong? or am i missing something? https://tanstack.com/router/v1/docs/framework/react/guide/path-params#advanced-i18n-with-route-groups

Path Params | TanStack Router React Docs

metropolitan-bronze•2mo ago

yes wrong docs

passive-yellowOP•2mo ago

also on a related note, is there any difference between a _pathless folder and a (group) folder?

metropolitan-bronze•2mo ago

not much. you can have a _pathless.tsx next to the _pathless folder which I think you can't have with route groups originally route groups were much more limited but we made them pretty similar to pathless routes

passive-yellowOP•2mo ago

would it make sense to merge them in the future maybe? to use only one syntax

genetic-orange•2mo ago

I'll fix this now

genetic-orange•2mo ago

https://github.com/TanStack/router/pull/4720

GitHub

Correct optional params docs syntax by tannerlinsley · Pull Reques...

Correct optional parameter syntax in documentation by removing unnecessary parentheses. Open Background Agent: Web · Cursor

passive-yellowOP•2mo ago

that was fast lol thanks One more thing regarding path params, is there a way to only match them if they are certain values? i dont mean validation like in the examples but lets say i have the following folder structure

routes/
└── {-$locale}/
    ├── $.tsx
    └── about.tsx

routes/
└── {-$locale}/
    ├── $.tsx
    └── about.tsx

currently if i go to the router /test it returns these params {"locale":"test","*":"","_splat":""} but for this url since its not on the valid params i would expect it to be the splat test and the locale undefined i modified the example above to show this

metropolitan-bronze•2mo ago

no that wont work a splat behind an optional will always lose against the optional

passive-yellowOP•2mo ago

makes sense i can just move it outside, thanks!

Gaming

Programming

Optional path params with groups

Did you find this page helpful?