Routes pointing to same component based on locale with Optional path parameters

reacttypescript

I need to define routes pointing to the same component based on the language, as an example the

search

search

search

search route must be:
/en/search or /es/search.
Here is an example of my tree while testing:

├── {-$locale}
│   ├── $.tsx (used for dynamic pages).
│   └── route.tsx (handles locale selection, taken from tanstack docs example)
├── index.tsx
└── __root.tsx

├── {-$locale}
│   ├── $.tsx (used for dynamic pages).
│   └── route.tsx (handles locale selection, taken from tanstack docs example)
├── index.tsx
└── __root.tsx

├── {-$locale}
│   ├── $.tsx (used for dynamic pages).
│   └── route.tsx (handles locale selection, taken from tanstack docs example)
├── index.tsx
└── __root.tsx

├── {-$locale}
│   ├── $.tsx (used for dynamic pages).
│   └── route.tsx (handles locale selection, taken from tanstack docs example)
├── index.tsx
└── __root.tsx

I've been reading on virtual routes which i believe may be the solution but wasn't able to get it to work, should the __virtual.ts file be inside my {-$locale} folder?
I would like to retain some sort of type safety and cannot go the splat route as i would be using it for other dynamic pages and would be a messy solution.
Can anyone guide me in the right direction? thanks!

Routes pointing to same component based on locale with Optional path parameters

Similar Threads

Similar Threads

Similar Threads