如何限制 reactjs useContext 仅用于来自 react-router 的某些路由答案

【问题标题】：How to limit reactjs useContext for only some routes from react-router如何限制 reactjs useContext 仅用于来自 react-router 的某些路由
【发布时间】：2020-10-29 23:59:38
【问题描述】：

我希望能够只为某些页面传递一些上下文，但是 react-router 的制作方式我不知道如何做到这一点。例如，我希望 AlertsProvider 仅可用于警报屏幕，GroupsProvider 仅可用于组屏幕等等

我该怎么做？

这是我现在拥有的代码：

<React.StrictMode>
  <GlobalStyle />
  <BrowserRouter>
    <AuthProvider>
      <PropertiesProvider>
        <BuyersProvider>
          <AlertsProvider>
            <GroupsProvider>
              <Switch>
                <PrivateRoute path="/" exact component={Dashboard} />
                <Route path="/login" exact component={Login} />
                <Route path="/recover_password" exact component={RecoverPassword} />
                <PrivateRoute path="/imoveis" exact component={Properties} />
                <PrivateRoute path="/compradores" exact component={Buyers} />
                <PrivateRoute path="/grupos" exact component={Groups} />
                <PrivateRoute path="/alertas" exact component={Alerts} />
                <PrivateRoute path="/relatorios" exact component={Reports} />
              </Switch>
            </GroupsProvider>
          </AlertsProvider>
        </BuyersProvider>
      </PropertiesProvider>
    </AuthProvider>
  </BrowserRouter>
</React.StrictMode>

【问题讨论】：

标签： reactjs react-router use-context

【解决方案1】：

为什么不能只在其对应的路由组件周围添加相关的提供者？例如-

<Switch>
    <PrivateRoute path="/alertas" exact>
        <AlertsProvider>
            <Alerts />
        </AlertsProvider>
    </PrivateRoute>
</Switch>

编辑：在您评论澄清某些路线需要共享上下文之后 - 我想您可以使用的另一种方法是将它们分成多个 Switch 语句 - 您不需要将一切合二为一。显然我不知道你所有的特定用例，但你可以做这样的事情 -

<BrowserRouter>
    <AuthProvider>
        <PropertiesProvider>
            <Switch>
                <Route path="/" exact component={Dashboard} />
                <PrivateRoute path="/imoveis" exact component={Properties} />
            </Switch>
        </PropertiesProvider>

        <AlertsProvider>
            <Switch>
                <PrivateRoute path="/alertas" exact component={Alerts} />
                <PrivateRoute path="/relatorios" exact component={Reports} />
            </Switch>
        </AlertsProvider>
    </AuthProvider>
</BrowserRouter>

这种方法的缺点是即使您实际上并不需要 PropertiesProvider 和 AlertsProvider无法访问它们）。不过，你可以用更多的管道来解决这个问题 -

<BrowserRouter>
    <AuthProvider>
        <Switch>
            <Route exact path={["/", "/imoveis"]}>
                <PropertiesProvider>
                    <Route exact path="/" component={Dashboard} />
                    <PrivateRoute path="/imoveis" component={Properties} />
                </PropertiesProvider>
            </Route>

            <Route exact path={["/alertas", "/relatorios"]}>
                <AlertsProvider>
                    <PrivateRoute path="/alertas" component={Alerts} />
                    <PrivateRoute path="/relatorios" component={Reports} />
                </AlertsProvider>
            </Route>
        </Switch>
    </AuthProvider>
</BrowserRouter>

【讨论】：

仪表板和属性路由需要相同的上下文，但只有那些需要。在这种特定情况下，我无法使其工作，只能以现在的方式工作
我不知道我可以有多个开关。感谢您的帮助
知道了 - 是的，你可以拥有任意数量的东西 - 基本上它只会（最多）从其子项中渲染一个项目，除此之外它并没有真正做太多。