Hello!
I follow the development of Redwood and Blitz.js very closely. Next.js (and therefore Blitz.js) in v10 introduced Internationalized Routing . Is there something similar in the RedwoodJS land or some plan to introduce something like it (I found no open issue on that)? IMHO there is also some page missing in the docs regarding internationalization at all. The only hint I could find is some i18n
generator that is not documented anywhere.
1 Like
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 :
opened 05:37PM - 01 May 21 UTC
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.
3 Likes