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

Question

I want to be able to pass some contexts only for some pages, but the way react-router is made I can't find out how to do that. For example, I want to AlertsProvider to be available only to alerts screen, GroupsProvider to be available only for groups screen and so on

How can I do this?

Here is the code I have right now:

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

gerrod · Accepted Answer · 2020-11-01T21:54:55.070

Why can't you just add the relevant providers around their corresponding route components? e.g. -

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

Edit: After you comment clarifying that some routes need to share a context - I guess another approach you could use is to just separate them out into multiple Switch statements - you don't need to have everything in one. Obviously I don't know all your particular use cases but you could do something like this -

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

The downside to this approach is that you're still rendering the PropertiesProvider and AlertsProvider even if you don't actually need them (though this does solve your issue of not making them available to child components that shouldn't have access to them). You can solve this with a bit more plumbing, though -

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

The dashboard and properties route needs the same context, but only that ones need. In this specific case i wasn't able to make it work, only the way it is now — Alan Willian Duarte, Oct 31 '20 at 00:57
I did not knew I could have multiple switches. Thank you for your help — Alan Willian Duarte, Nov 03 '20 at 00:51
Gotcha - yep you can have as many as you like - basically it will just render (at most) one item from its children, other than that it doesn't really do much. — gerrod, Nov 03 '20 at 04:03

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

1 Answers1