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

【问题标题】：Different Context in different routes in ReactReact中不同路由中的不同上下文
【发布时间】：2023-03-16 03:10:01
【问题描述】：

我的 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），即使看起来路由本身被调用。例如，如果我在

【问题讨论】：

标签： reactjs react-router react-context

【解决方案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>

【讨论】：