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

【问题标题】：Redirect react-router-redux push within component lifecycle在组件生命周期内重定向 react-router-redux 推送
【发布时间】：2017-01-09 13:12:46
【问题描述】：

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

这怎么可能？

【问题讨论】：

标签： reactjs internationalization redux react-router react-redux

【解决方案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 钩子示例：分页...

【讨论】：