我正在使用 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/ .
任何对架构模式或示例代码的引用都将不胜感激。
最佳答案
它有什么好处
- 以后如果你需要更改路径名,你可以只更改 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>
)
}
关于reactjs - 使用 React、React Redux 或 React Context 和 Material UI 的多语言应用程序的架构示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62256670/