即使路径被IonReactRouter更改后，React组件也不会呈现

Question

在通过firebase登录后，出现渲染Home组件的问题。

当我单击登录按钮时，我可以看到该路径已更改为http://localhost:8100/page/home/gallery，但未呈现任何内容（空白页）。仅当我手动刷新页面时才会呈现。

下面是App.tsx和Login.tsx代码。

App.tsx

import "./firebase";

import React, { Suspense } from "react";
import { FirebaseAppProvider, AuthCheck } from "reactfire";
import { IonApp,IonRouterOutlet, IonSplitPane,IonLoading } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { Redirect, Route } from 'react-router-dom';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

import { FIREBASE_CONFIG } from "./firebase";

import Home from './pages/Home';
import Login from './pages/Login';
import Menu from './components/Menu';
import Page from './pages/Page';

import { Plugins } from "@capacitor/core";
import Signup from './pages/Signup';

import { DataProvider } from "./contexts/DataContext";
const { SplashScreen } = Plugins;


SplashScreen.hide();

const PublicRoutes: React.FunctionComponent = () => {
  return (
    <IonRouterOutlet>
      <Route exact path="/page/auth/login" component={Login} />
      <Route exact path="/page/auth/signup" component={Signup} />
      {/* <Route exact path="/page/home/gallery" component={Signup} /> */}
      <Redirect exact path="/" to="/page/auth/login" />
    </IonRouterOutlet>
  );
};

const PrivateRoutes: React.FunctionComponent = () => {
  return (
     <IonApp>
        <IonSplitPane contentId="main">
       <IonReactRouter>
        {/*<!--  Side Menu  -->*/}
           <Menu />
        {/*<!--  Main Content  -->*/}   
           <IonRouterOutlet id="main">
      <Route exact path="/page/:name">
        <DataProvider>
          <Page />
        </DataProvider>
      </Route>
      <Route exact path="/page/home/gallery">
        <DataProvider>
          <Home />
        </DataProvider>
      </Route>
      <Redirect exact path="/" to="/page/home/gallery" />
    </IonRouterOutlet>
           </IonReactRouter>
         </IonSplitPane> 
     </IonApp>
  );
};

const App: React.FunctionComponent = () => {
  return (
    <FirebaseAppProvider firebaseConfig={FIREBASE_CONFIG}>
      <IonApp>
        <IonReactRouter>
          <Suspense fallback={<IonLoading isOpen={true} />}>
            <AuthCheck fallback={<PublicRoutes />}>
              <PrivateRoutes />
            </AuthCheck>
          </Suspense>
        </IonReactRouter>
      </IonApp>
    </FirebaseAppProvider>
  );
};

export default App;

Login.tsx

import React, { useEffect, useState } from "react";
import {
  IonButtons,
  IonButton,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonPage,
  IonItem,
  IonLabel,
  IonInput,
  IonAlert,
} from "@ionic/react";

import { useForm, Controller } from "react-hook-form";

import { useAuth } from "reactfire";
import { useHistory } from "react-router";
import { MyErrorDisplay } from "../components/MyErrorDisplay";

export interface CheckboxChangeEventDetail {
  value: any;
  checked: boolean;
}

const Login: React.FunctionComponent = () => {
  const history = useHistory();
  const [showErrorAlert, setShowErrorAlert] = useState("");

  // SEE - https://github.com/FirebaseExtended/reactfire/issues/228
  useEffect(() => {
    let map = (globalThis as any)["_reactFirePreloadedObservables"];
    map &&
      Array.from(map.keys()).forEach(
        (key: any) => key.includes("firestore") && map.delete(key)
      );
  }, []);

  // from react-hook-form
  // SEE - https://react-hook-form.com/
  const { handleSubmit, control, errors } = useForm();
  const auth = useAuth();
  /**
   * get data from form and sign the user in
   */
  const signIn = async (data: any) => {
    console.log(data);
    try {
      let r = await auth.signInWithEmailAndPassword(data.email, data.password);
      history.replace("/page/home/gallery");
      console.log(r);
    } catch (e) {
      setShowErrorAlert(e.message);
    }
  };

  console.log(history);
  return (
     <IonPage>
      <IonHeader>
        <IonToolbar color="light">
          <IonButtons slot="start" />
          <IonTitle>Login</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        {/**  Show Error when problem Logging In **/}
        <IonAlert
          isOpen={showErrorAlert !== ""}
          onDidDismiss={() => setShowErrorAlert("")}
          header={"Registration Error"}
          subHeader={"Error Logging In"}
          message={showErrorAlert}
          buttons={["OK"]}
        />

        <form onSubmit={handleSubmit(signIn)}>
          <IonItem>
            <IonLabel>Email</IonLabel>
            <Controller
              render={({ onChange }) => (
                <IonInput type="email" onIonChange={onChange} />
              )}
              control={control}
              defaultValue=""
              autoComplete="new-password"
              name="email"
              rules={{
                required: "'Email Address' is a required field",
                pattern: {
                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                  message: "Invalid email address",
                },
              }}
            />
          </IonItem>
          <MyErrorDisplay errors={errors} elementName="email" />
          <IonItem>
            <IonLabel>Password</IonLabel>
            <Controller
              render={({ onChange }) => (
                <IonInput
                  type="password"
                  onIonChange={onChange}
                  autocomplete="new-password"
                />
              )}
              control={control}
              autoComplete="new-password"
              name="password"
              rules={{
                required: "'Password' is a required field",
              }}
            />
          </IonItem>
          <MyErrorDisplay errors={errors} elementName="password" />
          <div className="ion-padding">
            <IonButton expand="block" type="submit">
              Log In
            </IonButton>
            <IonButton
              expand="block"
              type="button"
              onClick={() => history.push("/page/auth/signup")}
            >
              Create Account
            </IonButton>
          </div>
        </form>
      </IonContent>
    </IonPage>
  );
};

export default Login;