Question

我的React应用中的情况使用react-router看起来如下所示。我希望users/:userId端点的索引重定向到包含：userId params的另一个端点。有什么好办法呢？现在，来自currentUser的用户将返回null，因为代码仅在加载App时才执行一次，用户尚未经过身份验证。我猜我需要强制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>

Answer 1

如果我理解正确并且您想要从/users/1重定向到/users/1/profile和/users/2再转换为/users/2/profile，则只需将${currentUser().id}替换为{{ 1}}。

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

: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>的上下文中，因此您可以简单地定义目标路线相对。

React Router - 如何将IndexRedirect转换为动态路由

1 个答案: