https://ionicframework.com/docs/api/tabs
基于选项卡API，您可以确定用户和调用setShowModal(true)选择了哪个选项卡
在选项卡事件- www.example.com下https://ionicframework.com/docs/api/tabs#events，有一个名为tabSelected的事件

因为模态不需要自己的路由，并且IonTabBar只能接受IonTabButton作为子路由，所以如果您想在其中放置一个IonButton来打开模态，它需要放置在IonTabs之上，并使用绝对样式将其放置在选项卡栏之上。您可以在选项卡栏中放置一个虚拟IonTabButton，以确保为绝对样式留有空间-定位按钮（确保使用样式明显隐藏它）。
要通过按下按钮打开模态，请将IonModal放入其自己的组件中，然后将其导入App. tsx。在IonModal上使用trigger属性，确保在选项卡栏按钮上使用与trigger属性相同的id。
App.tsx

const App: React.FC = () => {

  return (
    <IonApp>
      <IonButton fill="clear" id="open-modal">
        <IonIcon icon={addCircleOutline} />
      </IonButton>

      <MyModal />

      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            <Route path="/signup" component={SignUp} exact={true} />
            <Route path="/login" component={Login} exact={true} />
            <Route path="/home" component={Home} />
            <Redirect exact from="/" to="/home" />
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            <IonTabButton tab="home" href="/home">
              <IonIcon icon={triangle} />
              <IonLabel>Explore</IonLabel>
            </IonTabButton>
            <IonTabButton tab="submit" href="/submit">
              <IonIcon icon={addCircle} />
              <IonLabel>Submit</IonLabel>
            </IonTabButton>
            {/* Dummy button */}
            <IonTabButton />
            <IonTabButton tab="login" href="/login">
              <IonIcon icon={square} />
              <IonLabel>Log In</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonReactRouter>
    </IonApp>
  );
};

MyModal.tsx

<IonModal isOpen={showModal} trigger="open-modal">
     <p>This is modal content</p>
     <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
</IonModal>

这似乎是一个非常老套的解决方案，应该有更好的方法来实现它。