reactjs - 使用 React、React Redux 或 React Context 和 Material UI 的多语言应用程序的架构示例

Question

我正在使用 React 和 Material UI 开发应用程序。应用程序需要根据语言环境值翻译用户界面。我需要提供 5 种语言的设施。我想达到类似 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.例如，英文的本地化页面 URL 是 https://material-ui.com/guides/localization/法语的同一页是https://material-ui.com/fr/guides/localization/ .

任何对架构模式或示例代码的引用都将不胜感激。

Answer 1

它有什么好处

• 以后如果你需要更改路径名，你可以只更改 PATHS
• 您可以在配置文件 genericRoutes 中添加该组件
• 对于本地化 path={`/:language?/${path}`} 你可以这样使用。

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>
    )
}