ionic-framework - 离子+反应。侧边菜单和选项卡一起只有默认选项卡正在工作其余两个选项卡变为空白

Question

我将 Ionic 与 React 一起使用。

在我的应用程序中，我同时拥有侧边菜单和选项卡。

在选项卡中，只有默认选项卡正常工作，其他选项卡显示空白屏幕。

我的代码如下：

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 看起来完全一样。

Answer 1

我弄清楚了这个问题。

这是路由到我的 App.tsx 文件的问题。

我改变了我的路线如下。（删除确切）

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

导致错误的早期路线如下

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