How to make the language part of the URL path?

[ric980]

Hello,

This is a i18n issue. My site needs to support 3 languages - bg, en, and de. I want to make the paths like this:

https://example.com/about => default goes to locale=bg
https://example.com/en/about => sets the locale to en
https://example.com/de/about => sets the locale to de

I've created my own tools for the translations. They are very light-weight and simple. That's why I don't want to use remix-i18n or any other i18n library. I just want to get the locale from the URL path in my root.tsx so I can pass it to my context that handles the translations.

I am not sure how to trick Remix into this as Remix uses the file system structure for routing. I also don't want to do any bad hacks to get there :)

Thanks.

[kiliman]

Use the Optional Segments feature.

Your routes should start with the ($lang), like ($lang).about.tsx

Then in your loader, you'll do:

export function loader({ params }: LoaderFunctionArgs) {
  const lang = params.lang ?? 'bg' // default lang is bg
  //...
}