Architecture example for a multi-language application using React, React Redux or React Context, and Material UI

Question

I am working in an application with React and Material UI. The application requires to translate the user interface according to locale values. I need to provide facilities for 5 languages. I would like to achieve a similar level of responsiveness like the Material UI documentation page.

I noticed that for the base language, which is English, the routes do not include a language segment on the URL path, but when a language other than English is selected, the URL has a language segment. For example, the Localization page URL in English is https://material-ui.com/guides/localization/ and the same page in French is https://material-ui.com/fr/guides/localization/.

Any references to architecture patterns or example code would be appreciated.

Answer 1

What are the good things about it

• In the future if you need to change the path name you can just change PATHS
• You can add the component in a config file genericRoutes
• for localization path={`/:language?/${path}`} you can use like this.

import { Route } from 'react-router-dom';

const PATHS = {
    SIGN_UP: '/sign-up',
    CONFIRMATION: '/confirmation'
}

const genericRoutes = [
    {
      path: PATHS.SIGN_UP,
      component: SignUp,
    },
    {
      path: PATHS.CONFIRMATION,
      component: Confirmation,
    },
]

const GenericRoute = (props) => <Route {...props} />;

const Routes = () => {
    return (
        <Switch>
            {genericRoutes.map(({ path, component, exact = true }, key) => (
                <GenericRoute
                key={key}
                exact={exact}
                path={`/:language?/${path}`}
                component={component}
                />
            ))}
        </Switch>
    )
}

Answer 2

It's not quite what you are looking for but might I also suggest you give i18next a look? It gives you a lot of flexibility when choosing the display language and can even detect the user's browser's language. You also have the option to pass the language in the path, similar to what others have suggested. Configuring it is straightforward, you can interpolate values, have a fallback language, just to name a few of the features it offers.

P.S. Here is how Material UI do it if you are striving for the same thing.