我正在尝试在应用程序范围内使用React状态，这样我的所有组件和页面都可以方便地访问最重要的变量，并更新它们。我注意到，从上下文设置和访问状态工作正常，但每当Route发生变化时，我的状态/上下文都完全重置为初始值。我花了两天时间试图理解这一点。但我完全被困住了。
这是全局上下文本身的声明：全局上下文.tsx

import { createContext } from "react";

export interface IGlobalState {
    prop1: boolean,
    prop2: string,
    prop2: string,
    [key: string]: any
}

export const initialState: IGlobalState = {
    prop1: true,
    prop2: "foo",
    prop3: "bar",
};

export const GlobalContext = createContext({
    globalState: initialState,
    setGlobalState: (GlobalState: any) => {}
});

然后创建一个上下文提供程序：应用程序tsx

import { GlobalContext, initialState } from './hooks/GlobalContext';
...
const App: React.FC = () => {
  const [globalState, setGlobalState] = React.useState(initialState);
  const globalContextState = { globalState, setGlobalState };

  return(
    <IonApp>
      <GlobalContext.Provider value={globalContextState}>
        <IonReactRouter>
          <IonRouterOutlet>
            <Route path="/" exact={true}>
              <Redirect to="/home" />
            </Route>
            <Route path="/home" exact={true}>
              <Home />
            </Route>
            <Route path="/settings" exact={true}>
              <Settings />
            </Route>
         </IonRouterOutlet>
        </IonReactRouter>
      </GlobalContext.Provider>
    </IonApp>
  );
}

在组件和页面中，我按如下方式访问上下文：

import { GlobalContext, IGlobalState, initialState } from '../hooks/GlobalContext';
...
const {globalState, setGlobalState} = useContext(GlobalContext);

setGlobalState((prevState: IGlobalState) => {
  let state = {...prevState};
  state.prop1 = "someValue";
  return state;
});
...
<SomeComponent value={globalState.prop1} />

同样，设置状态本身和从它阅读一样工作正常。但是每当我路由到另一个页面时，例如<Settings />，全局状态就会被重置为initialState。这是为什么呢？这让我感到难以置信。
注意：我试过将GlobalContext.Provider移到<IonApp>-Tag之外，因为我认为应用程序可能需要成为一个子组件，这样页面才能访问上下文。然而，这并不奏效。