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

Question

所以我有一些看起来像这样的嵌套路由:

<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，在这些组件中，我在 useEffect Hook 中获取了一个用户。

有没有办法让 react-router-dom 允许我在一个地方执行此提取并将结果提供给 EditUserContainer、UserCommentsContainer 和 UserCommentContainer？

Answer 1

我找到了一个我很满意的解决方案，但不确定为什么我一开始没有想到它(还在学习 React!)

<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>

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