为什么第二个（兄弟）React Context Provider 不起作用？或者，如果上面有同级上下文提供程序，为什么 React 上下文提供程序不工作

Question

我的react应用中有路由共享数据，所以我想使用Context来共享数据。但并非所有路由都共享同一种数据，所以我的解决方案是使用多个 Context Provider。

<ClientsContextProvider>
  <ProtectedRoute
    exact
    path="/clients/:clientId"
    isAuth={isAuth}
    component={Client}
  />
  <ProtectedRoute
    exact
    path="/clients"
    isAuth={isAuth}
    component={Clients}
  />
</ClientsContextProvider>

<ProjectsContextProvider>
  <ProtectedRoute
    exact
    path="/projects"
    isAuth={isAuth}
    component={Projects}
  />
  <ProtectedRoute
    exact
    path="/projects/:projectId"
    isAuth={isAuth}
    component={Project}
  />
</ProjectsContextProvider>

最终，该应用程序被身份验证上下文提供程序包装，但我希望根据它需要的数据将一些路由包装在特定的上下文提供程序中。

目前的问题是，虽然顶部（<ClientsContextProvider>）的路由有效，但它下面的兄弟（<ProjectsContextProvider>）不工作。当我在浏览器中使用 React Developer Tools 检查组件树时，即使我在（项目）路线中，也只显示 <ClientsContextProvider>。

Answer 1

在路由中嵌套提供商：

<ProtectedRoute exact path="/clients/:clientId" isAuth="{isAuth}">
  <ClientsContextProvider>
    <Clients />
  </ClientsContextProvider>
</ProtectedRoute>
<ProtectedRoute exact path="/clients" isAuth="{isAuth}">
  <ClientsContextProvider>
    <Clients />
  </ClientsContextProvider>
</ProtectedRoute>
<ProtectedRoute exact path="/projects" isAuth="{isAuth}">
  <ProjectsContextProvider>
    <Project />
  </ProjectsContextProvider>
</ProtectedRoute>
<ProtectedRoute exact path="/projects/:projectId" isAuth="{isAuth}">
  <ProjectsContextProvider>
    <Project />
  </ProjectsContextProvider>
</ProtectedRoute>

为什么第二个（兄弟）React Context Provider 不起作用？或者，如果上面有同级上下文提供程序，为什么 React 上下文提供程序不工作

Why doesn't second (sibling) React Context Provider work? Or, why doesn't a React Context Provider work if there is a sibling Context Provider above

reactjs

react-router

react-context

react-hooks