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

Question

我希望能够只为某些页面传递某些上下文，但是 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>

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

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

How to limit reactjs useContext for only some routes from react-router

reactjs

react-router

use-context