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

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

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!

TanStack•3mo ago•

8 replies

dry-scarlet

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

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

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads