为啥第二个（兄弟）React Context Provider 不起作用？或者，如果上面有同级 Context Provider，为啥 React Context Provider 不起作用

Posted 2023-04-14

【中文标题】为啥第二个（兄弟）React Context Provider 不起作用？或者，如果上面有同级 Context Provider，为啥 React Context Provider 不起作用

【英文标题】：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为什么第二个（兄弟）React Context Provider 不起作用？或者，如果上面有同级 Context Provider，为什么 React Context Provider 不起作用

【发布时间】：2021-09-24 23:48:32

【问题描述】：

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

<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 检查组件树时，即使我在 (Projects) 路由中，也只显示 <ClientsContextProvider>。

【参考方案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>

【讨论】：

使用此解决方案，两条路由是否会共享相同的状态（即两条路由具有相同的 Provider）？不会有 2 个单独的上下文提供程序吗？非常感谢。