Different Context in different routes in React

Question

My React app has a couple of different components that don't have anything to do with each other. So I would like to provide a different context to different routes. I tried the following:

    <Router>
        <Switch>
            <GlobalTimerProgramContext.Provider
                value={{ globalPrograms, setGlobalPrograms }}
            >
                <Route
                    strict
                    exact={true}
                    path="/programs"
                    component={ProgramsOverview}
                />
            </GlobalTimerProgramContext.Provider>
            <GlobalProfileContext.Provider
                value={{ globalProfiles, setGlobalProfiles }}
            >
                <Route
                    strict
                    exact={true}
                    path="/profiles"
                    component={ProfilesOverview}
                />
            </GlobalProfileContext.Provider>
            <GlobalChannelContext.Provider
                value={{ globalChannels, setGlobalChannels }}
            >
                <Route
                    strict
                    exact={true}
                    path="/channels"
                    component={ChannelsOverview}
                />
            </GlobalChannelContext.Provider>
            <Route strict path="/" exact={true}>
                <Redirect to="/programs" />
            </Route>
        </Switch>
</Router>

The issue is that only the first Route is working. If I switch to the second or third route (/profiles or /channels) the associated component (i.e. ProfilesOverview or ChannelsOverview) doesn't get called even though it seems the Route itself gets called. If I put for example a console.log infront of the <Route... , the log is showing correctly. Any idea what I'm doing wrong here?

Answer 1

You should use provider inside each route:

<Router>
    <Switch>
            <Route
                strict
                exact={true}
                path="/programs"
            >
              <GlobalTimerProgramContext.Provider
                  value={{ globalPrograms, setGlobalPrograms }}
              >
                  <ProgramsOverview/>
              </GlobalTimerProgramContext.Provider>
            </Route>

            <Route
                strict
                exact={true}
                path="/profiles"
            >
              <GlobalProfileContext.Provider
                  value={{ globalProfiles, setGlobalProfiles }}
              >
                  <ProfilesOverview/>
              </GlobalProfileContext.Provider>
            </Route>


            <Route
                strict
                exact={true}
                path="/channels"
                component={ChannelsOverview}
            >
              <GlobalChannelContext.Provider
                  value={{ globalChannels, setGlobalChannels }}
              >
                 <ChannelsOverview/> 
              </GlobalChannelContext.Provider>
            </Route>

        <Route strict path="/" exact={true}>
            <Redirect to="/programs" />
        </Route>
    </Switch>
</Router>