如何结合Ionic Segment和Slide来制作带有Ionic-React的可滑动标签？

npm install @ionic/react @ionic/react-router @ionic/core

import React from 'react';
import { IonApp, IonTabs, IonTabBar, IonTabButton, IonContent, IonSlide, IonCard } from '@ionic/react';

const TabSlide: React.FC = () => {
  return (
    <IonApp>
      <IonTabs>
        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/tab1">
            Tab 1
          </IonTabButton>
          <IonTabButton tab="tab2" href="/tab2">
            Tab 2
          </IonTabButton>
        </IonTabBar>
        <IonContent>
          <IonSlide>
            <IonCard>Slide 1 of Tab 1</IonCard>
          </IonSlide>
          <IonSlide>
            <IonCard>Slide 2 of Tab 1</IonCard>
          </IonSlide>
        </IonContent>
        <IonContent>
          <IonSlide>
            <IonCard>Slide 1 of Tab 2</IonCard>
          </IonSlide>
          <IonSlide>
            <IonCard>Slide 2 of Tab 2</IonCard>
          </IonSlide>
        </IonContent>
      </IonTabs>
    </IonApp>
  );
};

export default TabSlide;

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import TabSlide from './TabSlide';

const App: React.FC = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" component={TabSlide} exact />
      </Switch>
    </Router>
  );
};

export default App;