Javascript 如何为React路由器dom路由中的每个组件获取嵌套资源

因此，我有一些嵌套的路由，如下所示：

<Switch>
  <Route exact path={"/"}>
    <HomepageContainer />
  </Route>
  <Route path={"/users"}>
    <UsersContainer />
  </Route>
  <Route path={"/users/new"}>
    <NewUserContainer />
  </Route>
  <Route path={"/users/:userId/edit"}>
    <EditUserContainer />
  </Route>
  <Route path={"/users/:userId/comments"}>
    <UserCommentsContainer />
  </Route>
  <Route path={"/users/:userId/comments/:commentId"}>
    <UserCommentContainer />
  </Route>
  <Route render={() => <Redirect to={"/"} />} />
</Switch>

} />

其中三个在URL参数中有一个userId，在这些组件中，我在

useffect

hook中获取一个用户

---

react router dom是否有一种方法允许我在一个地方执行此提取，并将结果提供给EditUserContainer、UserCommentsContainer和UserCommentContainer？

我找到了一个满意的解决方案，但不确定最初为什么没有想到它（仍在学习react！）

{
}} />
{
}} />
{
}} />
} />

---

将每个嵌套用户组件包装在父CurrentUserContainer中，父CurrentUserContainer将负责执行获取和设置状态，使其在需要时可用。

您可以创建一个对象，其中包含自定义挂钩以及从所述组件中导出/导入的元素中获取所需的所有数据。共享挂钩（名为“routerHook”）的示例如下：

<Switch>
  <Route exact path={"/"}>
    <HomepageContainer />
  </Route>
  <Route path={"/users"}>
    <UsersContainer />
  </Route>
  <Route path={"/users/new"}>
    <NewUserContainer />
  </Route>
  <Route path={"/users/:userId/edit"} render={() => {
    <CurrentUserContainer>
      <EditUserContainer />
    </CurrentUserContainer>
  }} />
  <Route path={"/users/:userId/comments"} render={() => {
    <CurrentUserContainer>
      <UserCommentsContainer />
    </CurrentUserContainer>
  }} />
  <Route path={"/users/:userId/comments/:commentId"} render={() => {
    <CurrentUserContainer>
      <UserCommentContainer />
    </CurrentUserContainer>
  }} />
  <Route render={() => <Redirect to={"/"} />} />
</Switch>