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

我正在使用React和Material UI的应用程序中工作。应用程序需要根据区域设置值转换用户界面。我需要提供5种语言的设施。我希望能达到与之类似的反应水平

我注意到，对于基础语言，即英语，路由不包括URL路径上的语言段，但当选择英语以外的语言时，URL有一个语言段。例如，本地化页面的英文URL为，而同一页面的法文URL为

---

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

您似乎正在寻找这样一条路线：

<Route path="/:language?/guides/localization">
  {props => <div>{Object.entries(props.match.params).map(p => `${p[0]}=${p[1]}`).join(" ")}</div> }
</Route>

{props=>{Object.entries（props.match.params）.map（p=>`${p[0]}=${p[1]}`）。join（“”）}

---

如果

props.match.params.language

是

未定义的

，只需使用默认值（即英语）。

它有什么好处

• 将来如果需要更改路径名，只需更改路径即可
• 您可以在配置文件genericRoutes中添加该组件
• 对于本地化

  path={`/:language？/${path}`}

  可以这样使用

从'react router dom'导入{Route}；
常量路径={
注册：“/注册”，
确认：“/确认”
}
const generamicroutes=[
{
路径：路径。注册，
组成部分：注册，
},
{
路径：PATHS.CONFIRMATION，
组成部分：确认，
},
]
const genericute=（道具）=>；
常数路由=（）=>{
返回(
{genericRoutes.map（{path，component，exact=true}，key）=>(
))}
)
}

这不完全是您要找的，但我可以建议您也去看看吗？它在选择显示语言时为您提供了很大的灵活性，甚至可以检测用户的浏览器语言。您还可以选择在路径中传递语言，类似于其他人的建议。配置它很简单，您可以插入值，使用回退语言，仅列举它提供的一些功能

---

另一方面，如果你在为同样的事情努力，Material UI是如何做到这一点的。

在我当前的项目中，我正在使用，它给出了钩子名称UseTransformation。在上面的链接中，我附上了一步一步的指南来做同样的事情。在此帮助下，我们正在支持28种语言的翻译，它正在为我们工作

---

我希望这对你也有帮助。：）

谢谢你的回复。我正在寻找更多的架构设计的应用程序支持不同的语言的用户界面。如何把所有的东西放在一起。

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