Ionic Reactでページ遷移をios風にスライドアニメーション付にする方法

サンプル

ionic serveで起動して挙動確認してみてください。
サンプルソース

大事な部分

①まず、IonApp, IonReactRouter, IonRouterOutletタグがしっかり使われているか確認しましょう。
②setupConfig({mode: 'ios'})を指定しましょう。(デフォだと違うアニメーションが適用されてるので、iosを指定する必要がある)

const App: React.FC = () => {
  setupConfig({mode: 'ios'})
  return (
  <IonApp>
    <IonReactRouter>
        <IonRouterOutlet>
          <Route path="/tab1" component={Tab1} exact={true} />
          <Route path="/tab2" component={Tab2} exact={true} />
          <Route path="/tab2/details" component={Details} />
          <Route path="/tab3" component={Tab3} />
          <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
        </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
  );
}

③IonPageでしっかりラップする。
④routerLinkで遷移先、routerDirectionで遷移する方向を指定しましょう　"forward" | "back" | "none" "root"

const Tab1: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 1</IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer name="Tab 1 page" />
        <IonList>
          <IonItem routerLink="/tab3" routerDirection="forward">
            <IonLabel>tab 3</IonLabel>
          </IonItem>
          <IonItem routerLink="/tab2"  routerDirection="forward">
            <IonLabel>tab 2</IonLabel>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};

まとめ

何をどうすれば、ページ遷移時のアニメーションが追加されるのかがわかりにくくめちゃくちゃハマった。
よく公式読んだらIonReactRouter, IonRouterOutlet, IonPage, Navigationを全部使わないとダメなんだろうな、、ということがわかった。
https://ionicframework.com/jp/docs/react/navigation#ionrouteroutlet