所以我有一个本地化的网站,在某些情况下需要重定向路线。例如,如果用户将其 UI 设置为西班牙语,然后转到 mysite.com/about
,则需要将他们重定向到 mysite.com/es/about
。
所以基本上,路由是通过 react-router 中的<Route>
组件复制的:
{Object.values(UILanguages).map(locale => {
return (
<Route path={`${locale.basepath}`} key={locale.basepath} locale={locale} component={App} status={200}>
...routes go here
</Route>
)
})}
在<App>
的componentWillMount
生命周期方法中检查以确定我是否在错误的<Route>
组件上非常简单,但是我必须在应用程序中添加每个链接,这是我不想做的。相反,我想要外语的动态重定向,如第一段所示。
这怎么可能?
使用 react 路由器钩子 相反,它将比使用组件生命周期更干净(更小的组件)和更简单。
https://github.com/ReactTraining/react-router/blob/master/docs/API.md#onenternextstate-replace-callback
在您的情况下,您需要使用所有 3 个参数,因为第一个是下一个状态,第二个是您想要进行的重定向,第三个是在完成测试值时调用的回调。我可以给你一个关于如何制作这个的例子,但我真的不知道你的应用程序是如何构建的,所以检查这个链接,它对我有很大帮助:
https://www.youtube.com/watch?v=JicUNpwLzLY&t=359s
希望这有帮助!
PS:在某些情况下,您还需要定义onChange
钩示例:分页...