离子 + 反应侧菜单和选项卡一起只有默认选项卡是工作休息两个选项卡是空白的

问题描述

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

解决方法

我发现了这个问题。

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

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

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

导致错误的早期路线如下

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