ionic-framework - イオン+反応。サイド メニューとタブを一緒に使用すると、デフォルトのタブのみが機能し、残りの 2 つのタブは空白になります

Question

ReactでIonicを使用しています。

私のアプリでは、サイド メニューとタブの両方を一緒に使用しています。

タブでは、デフォルトのタブのみが正常に機能しており、他のタブでは空白の画面が表示されています。

私のコードは次のとおりです。

1. App.tsx は次のようになります

const App: React.FC = () => (
<IonApp>
    <IonReactRouter>
        <IonSplitPane contentId="main">
        <Menu />
  
        <IonRouterOutlet id="main">                
            <Route path="/login" component={Login} exact />
            <Route path="/tabs" component={Tabs} exact />
            <Route path="/register" component={Register} exact />
        <Route exact path="/" render={() => <Redirect to="/login" />} />
    </IonRouterOutlet>
    </IonSplitPane>
</IonReactRouter>
</IonApp>
);

export default App;

これで、以下のルートはタブ付きページを開きます

<Route path="/tabs" component={Tabs} exact />

2. Tabs.tsx は次のようになります

function Tabs() {
    return (
    <IonTabs>
    <IonRouterOutlet>
            <Route path="/tabs/tab1" component={Tab1} exact={true} />
            <Route path="/tabs/tab2" component={Tab2} exact={true} />
            <Route path="/tabs/tab3" component={Tab3}  exact={true}/>
            <Route path="/tabs" render={() => <Redirect to="/tabs/tab1" />} exact={true} />
    </IonRouterOutlet>

    <IonTabBar slot="bottom">

    <IonTabButton tab="calendar" href="/tabs/tab1">
          <IonIcon icon={calendar} />
          <IonLabel>Tab1</IonLabel>
    </IonTabButton>

    <IonTabButton tab="analysis" href="/tabs/tab2">
          <IonIcon icon={barChart} />
          <IonLabel>Tab2</IonLabel>
    </IonTabButton>

    <IonTabButton tab="timer" href="/tabs/tab3">
          <IonIcon icon={timer} />
          <IonLabel>Tab3</IonLabel>
    </IonTabButton>
        
      </IonTabBar>
    </IonTabs>

    
    );
    };

    export default Tabs;

3. Tab1.tsx は次のようになります

const Tab1 = () => {
return (
    <IonPage>
    <IonHeader>
            <IonToolbar  color="secondary">
                    <IonButtons slot="start">
                    <IonMenuButton />
                    </IonButtons>
                    <IonTitle>Timesheet</IonTitle>
                    </IonToolbar>
    </IonHeader>
       
    <IonHeader collapse="condense">
            <IonToolbar>
            <IonTitle size="large">Tab 1</IonTitle>
            </IonToolbar>
    </IonHeader>
    <IonContent  class="ion-padding">
        Tab 1 Content
    </IonContent>
    </IonPage>
    );
};

export default Tab1;

その他のタブ Tab2.tsx と Tab3.tsx はまったく同じに見えます。