Internationalization

simoncrypta · July 27, 2021, 2:34pm

Hi @medihack !
Welcome to the Redwood community

Yes, we have some plan to introduce sub-path Routing for i18n.

You can look at this issue than will make possible optional path parameters :

github.com/redwoodjs/redwood

RFC: Optional path parameters

opened 05:37PM - 01 May 21 UTC

Tobbe

topic/router v1/for-consideration

# Optional Path Parameters ## Existing functionality This is what you do t…o have a path parameter named `id` ```jsx <Route path="/user/{id}" page={UserStringPage} name="userString" /> ``` You can add a constraint and a "type cast" by doing this, and you'll get a `number` instead of a `string` when you use it ```jsx <Route path="/user/{id:Int}" page={UserIntPage} name="userInt" /> ``` You can even add custom types ``` const userRouteParamTypes = { slug: { constraint: /\w+-\w+/, transform: (param) => param.split('-'), } } <Router paramTypes={userRouteParamTypes}> <Route path="/post/{name:slug}" page={PostPage} name={post} /> </Router> ``` ## Rationale @simoncrypta mentioned to me he would like to have a parameter that optionally defines the language to use, so you can have all routes that start with e.g. /fr/ be in French, everything that start's with /de/ be in German etc. ## Proposed functionality I propose we add support for optional parameters by appending a question mark (`?`) to the end of the param name. In usage it would look like this ```jsx const userRouteParamTypes = { lang: { constraint: /en|fr|sv|de/, } } <Router paramTypes={userRouteParamTypes}> <Set wrap={[i18nContext, BlogContext, BlogLayout]}> <Route path="/{language?:lang}" page={HomePage} name="home" /> <Route path="/{language?:lang}/about" page={AboutPage} name="about" /> <Route path="/{language?:lang}/contact" page={ContactPage} name="contact" /> </Set> </Router> ``` If you navigated to /de/about you'd get the About page in German, if you navigated to /about you'd get it in whatever default language was configured. ## Challenges The biggest challenge is probably detecting if an optional parameter was passed or not. Like if we just had this ```jsx <Route path="/{opt?}" page={HomePage} name="home" /> <Route path="/{opt?}/about" page={AboutPage} name="about" /> ``` When someone goes to /about, is it HomePage with `opt` set to "about", or is it About page with `opt` undefined? It might also not handle 404s as nicely as it would otherwise. If someone goes to /aboot currently that would be a 404. Now it would be a valid navigation to the Home page, with `opt` set to "aboot"

For now, you can add path parameter for language in your routing and make it work with something like this :

const HomePage = ({language}) => {
  const { t, i18n } = useTranslation()

  useEffect(() => {
    i18n.changeLanguage(language)
  }, [i18n, language])

If you need some help with i18n + RedwoodJS, I will be more than happy to help you.