如何在Ionic React中将道具传递给tab

import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonRouterOutlet } from '@ionic/react';
import { Route, Redirect } from 'react-router-dom';

const ParentComponent: React.FC = () => {
  const propValue = "Hello, World!";

  return (
    <IonTabs>
      <IonRouterOutlet>
        <Route path="/tabs/tab1" render={() => <Tab1 propValue={propValue} />} exact={true} />
        <Route path="/tabs/tab2" render={() => <Tab2 propValue={propValue} />} exact={true} />
        <Redirect exact from="/tabs" to="/tabs/tab1" />
      </IonRouterOutlet>
      <IonTabBar slot="bottom">
        <IonTabButton tab="tab1" href="/tabs/tab1">
          <IonIcon icon={home} />
          <IonLabel>Tab 1</IonLabel>
        </IonTabButton>
        <IonTabButton tab="tab2" href="/tabs/tab2">
          <IonIcon icon={settings} />
          <IonLabel>Tab 2</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  );
};

export default ParentComponent;

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';

const Tab1: React.FC<{ propValue: string }> = ({ propValue }) => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <h1>{propValue}</h1>
      </IonContent>
    </IonPage>
  );
};

export default Tab1;

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';

const Tab2: React.FC<{ propValue: string }> = ({ propValue }) => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 2</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <h1>{propValue}</h1>
      </IonContent>
    </IonPage>
  );
};

export default Tab2;