在组件生命周期内重定向react-router-redux推送

Question

所以我有一个本地化的网站，并需要在某些情况下重定向路由。例如，如果用户的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>组件很简单，但是我必须在应用程序中的每个链接前面加上我不想做的事情。相反，我希望动态重定向外语，如第一段所示。

这怎麽可能？

Answer 1

改为使用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钩子，例如:分页...