如何在 Ion React 中将侧边菜单与选项卡导航相结合答案

【问题标题】：How to combine side menu with tab navigation in Ion React如何在 Ion React 中将侧边菜单与选项卡导航相结合
【发布时间】：2020-07-03 06:38:42
【问题描述】：

我在 ionic react 应用程序中有一个标签导航页面，我想在这个页面上添加一个侧边菜单，我知道我必须使用 IonMenu 组件，但我正在努力将两者合并。这是我的代码，说明了我是如何实现标签导航的：

import React, { Component } from "react";
 import {
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
} from "@ionic/react";

import { Redirect, Route } from "react-router-dom";
import { IonReactRouter } from "@ionic/react-router";
import { home, at, albums,addCircleOutline } from "ionicons/icons";

import Tab1 from "./Tab1";
import Tab2 from "./Tab2";
import Tab3 from "./Tab3";
import Tab4 from "./Tab4";

class Home extends Component {
  render() {
    return (
      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            <Route path="/tab1" component={Tab1} exact={true} />
            <Route path="/tab2" component={Tab2} exact={true} />
            <Route path="/tab3" component={Tab3} />
            <Route path="/tab4" component={Tab4} />
            <Route
              path="/"
              render={() => <Redirect to="/tab1" />}
              exact={true}
            />
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            <IonTabButton tab="tab1" href="/tab1">
              <IonIcon icon={home} />
              <IonLabel>Home</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab2" href="/tab2">
              <IonIcon icon={albums} />
              <IonLabel>Saved</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab4" href="/tab4">
              <IonIcon icon={addCircleOutline} />
              <IonLabel>Request</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab3" href="/tab3">
              <IonIcon icon={at} />
              <IonLabel>About</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonReactRouter>
    );
  }
}

export default Home;

我需要知道如何在此页面中添加侧边菜单以及如何添加按钮，以便当我单击它时，该按钮将打开侧边菜单

【问题讨论】：

标签： reactjs ionic-framework ionic-react

【解决方案1】：

首先，对于您要添加到选项卡菜单的所有页面，设置以 /tabs/* 开头的路径，例如 /tabs/tab1、/tabs/tab2、/tabs/tab3 等。

您需要创建一个具有名称的组件，例如，将具有选项卡导航的 MainTabs 和仅包含选项卡导航中页面的路由的 IonRouterOutlet。它可能看起来像这样：

<IonTabs>
    <IonRouterOutlet>
      <Route path="/tabs/tab1" component={Tab1} exact/>
      <Route path="/tabs/tab2" component={Tab2} exact/>
      <Route path="/tabs/tab3" component={Tab3} exact/>
    </IonRouterOutlet>
    <IonTabBar slot="bottom">
      <IonTabButton tab="tab1" href="/tabs/tab1">
        <IonLabel>Tab 1</IonLabel>
      </IonTabButton>
      <IonTabButton tab="tab2" href="/tabs/tab2">
        <IonLabel>Tab 2</IonLabel>
      </IonTabButton>
      <IonTabButton tab="tab3" href="/tabs/tab3">
        <IonLabel>Tab 3</IonLabel>
      </IonTabButton>
    </IonTabBar>
  </IonTabs>

然后在 App.tsx 中，你可以添加一个典型的侧边菜单代码，但有一个重要的路线：

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

这个路由器出口没有'exact'属性，它会选择所有以 /tabs/ 开头并且在 MainTabs 组件的路由器出口中定义的路由。因此，App.tsx 文件可能如下所示：

<IonReactRouter>
  <IonSplitPane contentId="main">
    <IonMenu contentId="main">
      <IonContent>
        <IonList>
          // here you can put your side menu items with router links
        </IonList>
      </IonContent>
    </IonMenu>
    <IonRouterOutlet id="main">
      // Important route for tabs navigation!
      <Route path="/tabs" component={MainTabs} />
      // and here are defined every other route in your app
      <Route path="/sideMenu1" component={SideMenu1} exact />
      <Route path="/sideMenu2" component={SideMenu2} exact />
      <Route path="/sideMenu3" component={SideMenu3} exact />
    </IonRouterOutlet>
  </IonSplitPane>
</IonReactRouter>

要添加侧边菜单切换按钮，您需要在 IonToolbar 组件中使用 IonMenuButton 组件。示例：

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonButtons slot="start">
        <IonMenuButton />
      </IonButtons>
      <IonTitle>My profile</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent className="ion-padding">
    // page content
   </IonContent>
</IonPage>

我希望这会有所帮助！

【讨论】：

另外，请记住将标签路由（即<Route path="/tabs" component={MainTabs} />）保留在 App.tsx 文件中的其他路由器之上。
如何让默认/tabs也指向/tabs/tab1页面？
@RameshN 我意识到你的评论是很久以前的事了，回答任何可能想知道的人。要制作默认选项卡 /tabs/tab1，您只需将路由路径更改为 /tabs/tab1 ，如下所示：<Route path="/tabs/tab1" component={MainTabs} />

【解决方案2】：

只需用拆分窗格包裹整个内容。

<IonReactRouter>
  <IonSplitPane contentId="main">
    <Menu />
    <IonRouterOutlet id="main">
      <Route path="/page/:name" component={Page} exact />
      <Route path="/tabs" component={TabRootPage} />
      <Redirect from="/" to="/tabs" exact />
    </IonRouterOutlet>
  </IonSplitPane>
</IonReactRouter>

在此处查看示例 - https://github.com/aaronksaunders/ionic-sidemenu-tabs-auth-starter

【讨论】：