javascript - React Router - 如何将索引重定向到动态路由

Question

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

路由.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>

Answer 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: 你可以简单地定义你的目标路由相对。