React中不同路由中的不同上下文

Question

我的 React 应用程序有几个不同的组件，彼此之间没有任何关系。所以我想为不同的路线提供不同的上下文。我尝试了以下方法：

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

问题是只有第一条路线有效。如果我切换到第二条或第三条路线（/profiles 或 /channels），则相关组件（即 ProfilesOverview 或 ChannelsOverview）不会被调用，即使看起来路线本身被调用也是如此。例如，如果我在

Answer 1

您应该在每个路由中使用提供程序：

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

React中不同路由中的不同上下文

Different Context in different routes in React

reactjs

react-router

react-context