React Router - 如何索引重定向到动态路由答案

【问题标题】：React Router - How to IndexRedirect to dynamic routeReact Router - 如何索引重定向到动态路由
【发布时间】：2017-02-19 00:49:42
【问题描述】：

我在我的 React 应用程序中使用 react-router 时出现如下情况。我希望users/:userId 端点的索引重定向到另一个包含 :userId 参数的端点。有什么好方法可以做到这一点？现在来自currentUser 的用户将返回 null，因为代码仅在开始时执行一次，当应用程序加载时用户尚未经过身份验证。我猜我需要强制 react-router 重新加载历史记录和某些变量，或者更改我进行身份验证的顺序？

routes.js

{ /* Routes requiring login */ }
<Route onEnter={requireLogin}>
  <Route path="users" component={Users}>
    <Route path=":userId" component={User}>
      <IndexRedirect to={`/users/${currentUser().id}/profile`} />
      <Route path="profile" component={UserProfile} />
      <Route path="settings" component={UserSettings} />
      <Route path="activity" component={UserActivity} />
    </Route>
  </Route>
</Route>

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

如果我理解正确并且您想从/users/1 重定向到/users/1/profile 和/users/2 到/users/2/profile，您可以简单地将${currentUser().id} 替换为:userId。

所以你的代码看起来像这样：

<Route onEnter={requireLogin}>
  <Route path="users" component={Users}>
    <Route path=":userId" component={User}>
      <IndexRedirect to="profile" />
      <Route path="profile" component={UserProfile} />
      <Route path="settings" component={UserSettings} />
      <Route path="activity" component={UserActivity} />
    </Route>
  </Route>
</Route>

因为重定向是在路由 :userId: 的上下文中，您可以简单地定义您的目标路由相对。

【讨论】：

这样，谢谢！从 react-router 文档看来，它只接受绝对路径。