0

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

4

1 回答 1

0

我弄清楚了这个问题。

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

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

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

导致错误的早期路线如下

<Route path="/tabs" component={Tabs} exact/>
于 2020-12-29T17:02:38.920 回答