CODEWITHSUNDEEP
reactjsreact-routerreact-context
bbasmer
bbasmer

Reputation: 157

Different Context in different routes in React

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?

Upvotes: 0

Views: 455

Answers (1)

MaK
MaK

Reputation: 131

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>

Upvotes: 1

Related Questions