小编Tan*_*ain的帖子

在子页面上隐藏 IonTab - Ionic React 5

我正在构建 Ionic React 应用程序,并且 ionic 的版本是 5。在我的应用程序中,我有底部导航。App.tsx中底部导航的逻辑我已经提到了。

我在仪表板页面上有一个添加按钮,单击该按钮我希望打开一个不包含底部导航的页面。我在互联网上得到了很多关于 Ionic-Angular 的答案。我特别在寻找答案 Ionic-React。

App.tsx    
     <IonContent>
        <IonReactRouter>
          <IonTabs>
            <IonRouterOutlet>
              <Route path="/profile" component={Profile} exact={true} />
              <Route path="/dashboard" component={Dashboard} exact={true} />
              <Route path="/dashboard/addInfo" component={Info} exact={true} />
              <Route path="/" render={() => <Redirect to="/dashboard" />} exact={true} />
            </IonRouterOutlet>
            <IonTabBar slot="bottom">
              <IonTabButton tab="home" href="/home">
                <IonIcon icon={home} />
                <IonLabel>Home</IonLabel>
              </IonTabButton>
              <IonTabButton tab="profile" href="/profile">
                <IonIcon icon={profile} />
                <IonLabel>Profile</IonLabel>
              </IonTabButton>
              <IonTabButton tab="dashboard" href="/dashboard">
                <IonIcon icon={grid} />
                <IonLabel>Dashboard</IonLabel>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        </IonReactRouter>
      </IonContent>
Run Code Online (Sandbox Code Playgroud)

ionic-framework react-router ionic-react

6
推荐指数
1
解决办法
1254
查看次数