React Navigation

このガイドでは、Ionic と React で構築されたアプリでのルーティングの仕組みについて説明します。

IonReactRouter は、人気のある React Router ライブラリを内部で使用しています。Ionic と React Router を使用すると、豊富なページ遷移を備えたマルチページアプリを作成できます。

React Router を使用したルーティングに関するすべての知識は、Ionic React に引き継がれます。Ionic React アプリの基本と、ルーティングがどのように機能するかを見てみましょう。

Ionic React でのルーティング

これは、「/dashboard」URL への単一のルートを定義するサンプル App コンポーネントです。「/dashboard」にアクセスすると、ルートは DashboardPage コンポーネントをレンダリングします。

App.tsx

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/dashboard" component={DashboardPage} />
        <Redirect exact from="/" to="/dashboard" />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

Route の直後に、デフォルトの Redirect を定義します。これは、ユーザーがアプリのルート URL ("/") にアクセスしたときに、"/dashboard" URL にリダイレクトします。

リダイレクトには exact プロパティも設定されています。これは、このルートが一致するには、URL が from プロパティ (または Route で exact が使用されている場合は path プロパティ) と正確に一致する必要があることを意味します。それがないと、すべてのルートは "/" で始まるため、このリダイレクトはすべてのルートでレンダリングされます。

ユーザーが認証されているかどうかを確認するなど、条件に基づいて、ルートのレンダリングメソッドからプログラムでリダイレクトすることもできます。

<Route
  exact
  path="/dashboard"
  render={(props) => {
    return isAuthed ? <DashboardPage {...props} /> : <LoginPage />;
  }}
/>

IonReactRouter

IonReactRouter コンポーネントは、React Router の従来の BrowserRouter コンポーネントをラップし、ルーティング用にアプリをセットアップします。したがって、BrowserRouter の代わりに IonReactRouter を使用してください。IonReactRouter に任意のプロパティを渡すことができ、それらは基礎となる BrowserRouter に渡されます。

ネストされたルート

ダッシュボードページ内で、アプリのこの特定の部分に関連するルートをさらに定義します。

DashboardPage.tsx

const DashboardPage: React.FC = () => {
  return (
    <IonPage>
      <IonRouterOutlet>
        <Route exact path="/dashboard" component={UsersListPage} />
        <Route path="/dashboard/users/:id" component={UserDetailPage} />
      </IonRouterOutlet>
    </IonPage>
  );
};

ここでは、アプリのダッシュボード部分からページを指すように定義されたルートがさらにいくつかあります。パスではルート全体を定義する必要があり、このページにその URL から到着した場合でも、"/dashboard" を省略できないことに注意してください。React Router には完全なパスが必要であり、相対パスはサポートされていません。

ただし、match オブジェクトの url プロパティを使用して、コンポーネントのレンダリングに使用された URL を提供できます。これは、ネストされたルートを操作する場合に役立ちます。

const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
  return (
    <IonPage>
      <IonRouterOutlet>
        <Route exact path={match.url} component={UsersListPage} />
        <Route path={`${match.url}/users/:id`} component={UserDetailPage} />
      </IonRouterOutlet>
    </IonPage>
  );
};

ここで、match.url には、DashboardPage のレンダリングに使用された URL である "/dashboard" の値が含まれています。

これらのルートは IonRouterOutlet でグループ化されています。次にそれについて説明しましょう。

IonRouterOutlet

IonRouterOutlet コンポーネントは、Ionic「ページ」をレンダリングするルートのコンテナを提供します。ページが IonRouterOutlet にある場合、コンテナはページ間の遷移アニメーションを制御し、ページが作成および破棄されるタイミングを制御します。これにより、ビュー間を切り替える際にビュー間の状態を維持するのに役立ちます。

上記の DashboardPage は、ユーザーリストページと詳細ページを表示します。2 つのページ間を移動する場合、IonRouterOutlet は適切なプラットフォームページ遷移を提供し、ユーザーがリストページに戻ったときに、離れたときと同じ状態で表示されるように、前のページの状態をそのまま保持します。

IonRouterOutlet には、Route または Redirect のみを含める必要があります。その他のコンポーネントは、Route の結果として、または IonRouterOutlet の外部のいずれかでレンダリングする必要があります。

フォールバックルート

一般的なルーティングのユースケースは、ナビゲートされた場所が定義されたどのルートにも一致しない場合にレンダリングされる「フォールバック」ルートを提供することです。

IonRouterOutlet 内で最後に定義されたルートとして、path プロパティなしで Route コンポーネントを配置することにより、フォールバックルートを定義できます。

DashboardPage.tsx

const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
  return (
    <IonRouterOutlet>
      <Route exact path={match.url} component={UsersListPage} />
      <Route path={`${match.url}/users/:id`} component={UserDetailPage} />
      <Route render={() => <Redirect to={match.url} />} />
    </IonRouterOutlet>
  );
};

ここでは、場所が最初の 2 つの Route と一致しない場合、IonRouterOutlet が Ionic React アプリを match.url パスにリダイレクトすることがわかります。

代わりにリダイレクトを提供するのではなく、レンダリングするコンポーネントを提供することもできます。

const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
  return (
    <IonRouterOutlet>
      <Route exact path={match.url} component={UsersListPage} />
      <Route path={`${match.url}/users/:id`} component={UserDetailPage} />
      <Route component={NotFoundPage} />
    </IonRouterOutlet>
  );
};

IonPage

IonPage コンポーネントは、Ionic React アプリの各ビューをラップし、ページ遷移とスタックナビゲーションが適切に機能するようにします。ルーターを使用してナビゲートされる各ビューには、IonPage コンポーネントを含める必要があります。

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import React from 'react';

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">Hello World</IonContent>
    </IonPage>
  );
};
export default Home;

ナビゲーション

Ionic React アプリでさまざまなビューにルーティングする場合、いくつかのオプションがあります。ここでは、UsersListPage は、項目がタップ/クリックされたときに移動するルートを指定するために、IonItem の routerLink プロパティを使用します。

UsersListPage.tsx

const UsersListPage: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Users</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem routerLink="/dashboard/users/1">
            <IonLabel>User 1</IonLabel>
          </IonItem>
          <IonItem routerLink="/dashboard/users/2">
            <IonLabel>User 2</IonLabel>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};

routerLink プロパティを持つ他のコンポーネントは、IonButton、IonCard、IonRouterLink、IonFabButton、および IonItemOption です。

これらの各コンポーネントには、使用するページ遷移のタイプ ("back"、"forward"、または "none") を明示的に設定するための routerDirection プロパティもあります。

routerLink プロパティを持つこれらのコンポーネントの外部では、React Router の Link コンポーネントを使用してビュー間を移動することもできます。

<Link to="/dashboard/users/1">User 1</Link>

ルーティングには、可能な限り上記のいずれかの方法を使用することをお勧めします。これらのアプローチの利点は、どちらもアンカー (<a>) タグをレンダリングすることであり、これはアプリの全体的なアクセシビリティに適しています。

ナビゲーションのプログラム的なオプションは、React Router がルートを介してレンダリングするコンポーネントに提供する history プロパティを使用することです。

<IonButton
  onClick={(e) => {
    e.preventDefault();
    history.push('/dashboard/users/1');
  }}
>
  Go to User 1
</IonButton>

注意

history はプロパティです。

history.go を使用したナビゲーション

React Router は、アプリケーション履歴を前後に移動できる history.go メソッドを持つ history パッケージを使用します。例を見てみましょう。

次のようなアプリケーション履歴があるとします。

/pageA --> /pageB --> /pageC

/pageC で router.go(-2) を呼び出すと、/pageA に戻ります。その後、router.go(2) を呼び出すと、/pageC に移動します。

Ionic React では、現時点では history.go() の使用はサポートされていません。Ionic React でこの機能が追加されることに興味がありますか？ GitHub でお知らせください！

URL パラメータ

ダッシュボードページで定義された2番目のルートには、URLパラメータが定義されています（パス内の ":id" の部分）。URLパラメータは、path の動的な部分であり、ユーザーが "/dashboard/users/1" のようなURLに移動すると、"1" は "id" という名前のパラメータに保存され、ルートがレンダリングするコンポーネントでアクセスできます。どのように行われるか見てみましょう。

UserDetailPage.tsx

interface UserDetailPageProps
  extends RouteComponentProps<{
    id: string;
  }> {}

const UserDetailPage: React.FC<UserDetailPageProps> = ({ match }) => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>User Detail</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>User {match.params.id}</IonContent>
    </IonPage>
  );
};

match プロパティには、URLパラメータを含む、一致したルートに関する情報が含まれています。ここで id パラメータを取得し、画面に表示します。

TypeScriptインターフェースを使用してpropsオブジェクトを強く型付けする方法に注目してください。このインターフェースにより、コンポーネント内で型安全とコード補完が得られます。

線形ルーティングと非線形ルーティング

線形ルーティング

ルーティングを使用するWebアプリを構築したことがある場合は、おそらく以前に線形ルーティングを使用したことがあるでしょう。線形ルーティングとは、ページをプッシュおよびポップすることで、アプリケーション履歴を前後に移動できることを意味します。

以下は、モバイルアプリでの線形ルーティングの例です。

この例のアプリケーション履歴には、次のパスがあります。

アクセシビリティ --> VoiceOver --> 音声

戻るボタンを押すと、同じルーティングパスを逆方向にたどります。線形ルーティングは、シンプルで予測可能なルーティング動作を可能にするという点で役立ちます。

線形ルーティングの欠点は、タブビューなどの複雑なユーザーエクスペリエンスを許可しないことです。ここで非線形ルーティングが登場します。

非線形ルーティング

非線形ルーティングは、Ionicでモバイルアプリを構築することを学ぶ多くのWeb開発者にとって新しい概念かもしれません。

非線形ルーティングとは、ユーザーが戻るべきビューが、必ずしも画面に表示されていた前のビューではないことを意味します。

以下は、非線形ルーティングの例です。

上記の例では、オリジナルタブから開始します。カードをタップすると、オリジナルタブ内のテッド・ラッソビューに移動します。

ここから、検索タブに切り替えます。次に、オリジナルタブを再度タップすると、テッド・ラッソビューに戻ります。この時点で、非線形ルーティングの使用を開始しました。

なぜこれが非線形ルーティングなのでしょうか？前にいたビューは検索ビューでした。ただし、テッド・ラッソビューで戻るボタンを押すと、ルートのオリジナルビューに戻る必要があります。これは、モバイルアプリの各タブが独自のスタックとして扱われるためです。「タブの操作」セクションで、これについてさらに詳しく説明します。

テッド・ラッソビューから戻るボタンをタップすると、単純に history.go(-1) を呼び出すだけの場合、検索ビューに戻りますが、これは正しくありません。

非線形ルーティングにより、線形ルーティングでは処理できない洗練されたユーザーフローが可能になります。ただし、history.go() などの特定の線形ルーティングAPIは、この非線形環境では使用できません。つまり、タブまたはネストされたアウトレットを使用する場合は、history.go() を使用しないでください。

どちらを選ぶべきか？

非線形ルーティングを追加する必要が生じるまでは、アプリケーションをできるだけシンプルに保つことをお勧めします。非線形ルーティングは非常に強力ですが、モバイルアプリケーションにかなりの複雑さも追加します。

非線形ルーティングの最も一般的な2つの用途は、タブとネストされたIonRouterOutletsです。アプリケーションがタブまたはネストされたルーターアウトレットのユースケースに適合する場合にのみ、非線形ルーティングを使用することをお勧めします。

タブの詳細については、「タブの操作」を参照してください。

ネストされたルーターアウトレットの詳細については、「ネストされたルート」を参照してください。

共有URLとネストされたルート

ルーティングを設定する際の一般的な混乱点は、共有URLとネストされたルートのどちらを使用するかを決定することです。このガイドのこの部分では、両方を説明し、どちらを使用するかを決定するのに役立ちます。

共有URL

共有URLとは、ルートがURLの一部を共有するルート構成です。以下は、共有URL構成の例です。

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/dashboard" exact={true}>
          <DashboardMainPage />
        </Route>
        <Route path="/dashboard/stats" exact={true}>
          <DashboardStatsPage />
        </Route>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

上記のルートは、URLのdashboardの部分を再利用するため、「共有」と見なされます。

ネストされたルート

ネストされたルートとは、ルートが他のルートの子としてリストされているルート構成です。以下は、ネストされたルート構成の例です。

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/dashboard/:id">
          <DashboardRouterOutlet />
        </Route>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

const DashboardRouterOutlet: React.FC = () => (
  <IonRouterOutlet>
    <Route path="/dashboard" exact={true}>
      <DashboardMainPage />
    </Route>
    <Route path="/dashboard/stats" exact={true}>
      <DashboardStatsPage />
    </Route>
  </IonRouterOutlet>
);

上記のルートは、親ルートのchildren配列内にあるため、ネストされています。親ルートはDashboardRouterOutletコンポーネントをレンダリングすることに注意してください。ルートをネストする場合は、IonRouterOutletの別のインスタンスをレンダリングする必要があります。

どちらを選ぶべきか？

共有URLは、ページAからページBに遷移する際に、2つのページ間の関係をURLで維持したい場合に最適です。前の例では、/dashboardページ上のボタンは、/dashboard/statsページに遷移できます。2つのページ間の関係は、a)ページ遷移とb)URLによって維持されます。

ネストされたルートは、アウトレットAでコンテンツをレンダリングしながら、ネストされたアウトレットBの内側にもサブコンテンツをレンダリングしたい場合に使用する必要があります。最も一般的なユースケースはタブです。タブのIonicスターターアプリケーションをロードすると、最初のIonRouterOutletにIonTabBarおよびIonTabsコンポーネントがレンダリングされているのがわかります。IonTabsコンポーネントは、各タブのコンテンツのレンダリングを担当する別のIonRouterOutletをレンダリングします。

モバイルアプリケーションでネストされたルートが理にかなっているユースケースはほとんどありません。迷った場合は、共有URLルート構成を使用してください。タブ以外のコンテキストでネストされたルーティングを使用すると、アプリのナビゲーションがすぐに混乱する可能性があるため、強く注意が必要です。

タブの操作

タブを使用する場合、Ionicはどのビューがどのタブに属しているかを認識する方法が必要です。IonTabsコンポーネントがここで役立ちますが、これに対するルーティング設定がどのように見えるかを見てみましょう。

<IonApp>
  <IonReactRouter>
    <IonRouterOutlet>
      <Route path="/tabs" render={() => <Tabs />} />
      <Route exact path="/">
        <Redirect to="/tabs" />
      </Route>
    </IonRouterOutlet>
  </IonReactRouter>
</IonApp>

ここでは、tabsパスがTabsコンポーネントをロードします。このコンポーネント内で、各タブをルートオブジェクトとして提供します。この例では、パスをtabsと呼びますが、これはカスタマイズできます。

まず、Tabsコンポーネントを見てみましょう。

import { Redirect, Route } from 'react-router-dom';
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { ellipse, square, triangle } from 'ionicons/icons';
import Tab1 from './pages/Tab1';
import Tab2 from './pages/Tab2';
import Tab3 from './pages/Tab3';

const Tabs: React.FC = () => (
  <IonTabs>
    <IonRouterOutlet>
      <Redirect exact path="/tabs" to="/tabs/tab1" />
      <Route exact path="/tabs/tab1">
        <Tab1 />
      </Route>
      <Route exact path="/tabs/tab2">
        <Tab2 />
      </Route>
      <Route path="/tabs/tab3">
        <Tab3 />
      </Route>
      <Route exact path="/tabs">
        <Redirect to="/tabs/tab1" />
      </Route>
    </IonRouterOutlet>
    <IonTabBar slot="bottom">
      <IonTabButton tab="tab1" href="/tabs/tab1">
        <IonIcon icon={triangle} />
        <IonLabel>Tab 1</IonLabel>
      </IonTabButton>
      <IonTabButton tab="tab2" href="/tabs/tab2">
        <IonIcon icon={ellipse} />
        <IonLabel>Tab 2</IonLabel>
      </IonTabButton>
      <IonTabButton tab="tab3" href="/tabs/tab3">
        <IonIcon icon={square} />
        <IonLabel>Tab 3</IonLabel>
      </IonTabButton>
    </IonTabBar>
  </IonTabs>
);

export default Tabs;

以前にIonic Frameworkを使用したことがある場合は、これが馴染み深いと感じるはずです。IonTabsコンポーネントを作成し、IonTabBarを提供します。IonTabBarは、ルーター構成の対応するタブに関連付けられたtabプロパティを持つIonTabButtonコンポーネントを提供します。また、IonTabsに異なるタブビューをレンダリングするアウトレットを提供するIonRouterOutletも提供します。

ヒント

IonTabsはIonPageをレンダリングするため、ここでIonPageを手動で追加する必要はありません。

Ionicでのタブの仕組み

Ionicの各タブは、個別のナビゲーションスタックとして扱われます。つまり、アプリケーションに3つのタブがある場合、各タブには独自のナビゲーションスタックがあります。各スタック内では、前進（ビューをプッシュ）および後退（ビューをポップ）できます。

この動作は、他のWebベースのUIライブラリにあるほとんどのタブ実装とは異なるため、注意することが重要です。他のライブラリは通常、タブを1つの履歴スタックとして管理します。

Ionicは開発者がモバイルアプリを構築するのを支援することに重点を置いているため、Ionicのタブは、可能な限りネイティブモバイルタブと一致するように設計されています。その結果、Ionicのタブには、他のUIライブラリで見たタブの実装とは異なる特定の動作がある場合があります。これらの違いについて詳しく知るために、読み進めてください。

タブ内の子ルート

タブにルートを追加する場合、親タブをパスのプレフィックスとして、兄弟ルートとして記述する必要があります。以下の例では、/tabs/tab1/view ルートを /tabs/tab1 ルートの兄弟として定義しています。この新しいルートには tab1 プレフィックスがあるため、Tabs コンポーネント内でレンダリングされ、IonTabBar ではタブ 1 が引き続き選択された状態になります。

<IonTabs>
  <IonRouterOutlet>
    <Redirect exact path="/tabs" to="/tabs/tab1" />
    <Route exact path="/tabs/tab1">
      <Tab1 />
    </Route>
    <Route exact path="/tabs/tab1/view">
      <Tab1View />
    </Route>
    <Route exact path="/tabs/tab2">
      <Tab2 />
    </Route>
    <Route path="/tabs/tab3">
      <Tab3 />
    </Route>
    <Route exact path="/tabs">
      <Redirect to="/tabs/tab1" />
    </Route>
  </IonRouterOutlet>
  <IonTabBar slot="bottom">
    <IonTabButton tab="tab1" href="/tabs/tab1">
      <IonIcon icon={triangle} />
      <IonLabel>Tab 1</IonLabel>
    </IonTabButton>
    <IonTabButton tab="tab2" href="/tabs/tab2">
      <IonIcon icon={ellipse} />
      <IonLabel>Tab 2</IonLabel>
    </IonTabButton>
    <IonTabButton tab="tab3" href="/tabs/tab3">
      <IonIcon icon={square} />
      <IonLabel>Tab 3</IonLabel>
    </IonTabButton>
  </IonTabBar>
</IonTabs>

タブの切り替え

各タブは独自のナビゲーションスタックであるため、これらのナビゲーションスタックが相互に作用しないようにすることが重要です。つまり、タブ 1 のボタンでユーザーをタブ 2 にルーティングすることは絶対に避けるべきです。言い換えれば、タブの変更は、タブバーのタブボタンをユーザーがタップすることによってのみ行うべきです。

この実践の良い例は、iOS App Store および Google Play Store のモバイルアプリケーションです。これらのアプリはどちらもタブ付きのインターフェースを提供していますが、ユーザーをタブ間でルーティングすることはありません。たとえば、iOS App Store アプリの「ゲーム」タブが、ユーザーを「検索」タブに誘導したり、その逆を行ったりすることはありません。

タブでよくある間違いをいくつか見てみましょう。

複数のタブが参照する設定タブ

一般的な方法は、設定ビューを独自のタブとして作成することです。これは、開発者がネストされた設定メニューをいくつか表示する必要がある場合に非常に便利です。ただし、他のタブは設定タブにルーティングしようとしないでください。上記で述べたように、設定タブをアクティブにする唯一の方法は、ユーザーが適切なタブボタンをタップすることです。

タブが設定タブを参照する必要がある場合は、ion-modal を使用して設定ビューをモーダルにすることをお勧めします。これは、iOS App Store アプリで見られる手法です。このアプローチでは、どのタブでも、各タブが独自のスタックであるというモバイルタブのパターンを壊すことなく、モーダルを表示できます。

以下の例は、iOS App Store アプリが複数のタブから「アカウント」ビューを表示する方法を示しています。「アカウント」ビューをモーダルで表示することで、アプリはモバイルタブのベストプラクティス内で動作し、複数のタブに同じビューを表示できます。

タブ間でビューを再利用する

別の一般的な方法は、同じビューを複数のタブで表示することです。開発者は、ビューを単一のタブに含め、他のタブがそのタブにルーティングすることで、これを実現しようとすることがよくあります。上記で述べたように、これはモバイルタブのパターンを壊すため、避ける必要があります。

代わりに、各タブに同じコンポーネントを参照するルートを設定することをお勧めします。これは、Spotify などの人気のあるアプリで行われている手法です。たとえば、「ホーム」、「検索」、「あなたのライブラリ」タブからアルバムまたはポッドキャストにアクセスできます。アルバムまたはポッドキャストにアクセスすると、ユーザーはそのタブ内に留まります。アプリは、タブごとにルートを作成し、コードベースで共通のコンポーネントを共有することによって、これを実現しています。

以下の例は、Spotify アプリが複数のタブでコンテンツを表示するために同じアルバムコンポーネントを再利用する方法を示しています。各スクリーンショットは同じアルバムを示していますが、異なるタブから表示されていることに注意してください。

ホームタブ	検索タブ

ライブ例

上記の概念とコードを実際に試してみたい場合は、StackBlitz での上記のトピックのライブ例をご覧ください。

タブビューの IonRouterOutlet

タブビューで作業する場合、Ionic React では、どのビューがどのタブに属するかを判断する方法が必要です。これは、Route に提供されるパスが正規表現であるという事実を利用することで実現しています。

構文は少し奇妙に見えますが、理解すれば非常に簡単です。

たとえば、2 つのタブ（セッションとスピーカー）を持つビューのルートは、次のように設定できます。

<IonRouterOutlet>
  <Route path="/:tab(sessions)" component={SessionsPage} exact={true} />
  <Route path="/:tab(sessions)/:id" component={SessionDetail} />
  <Route path="/:tab(speakers)" component={SpeakerList} exact={true} />
</IonRouterOutlet>

ナビゲートされた URL が "/sessions" の場合、最初のルートに一致し、「tab」という名前の URL パラメータが値「sessions」とともに、SessionsPage に渡される結果の match オブジェクトに追加されます。

ユーザーがセッションの詳細ページ（たとえば "/sessions/1"）に移動すると、2 番目のルートは「tab」という名前の URL パラメータを値「sessions」と共に追加します。IonRouterOutlet は、両方のページが同じ「セッション」タブにあることを認識すると、新しいビューへのアニメーション付きページ遷移を提供します。ユーザーが新しいタブ（この場合は「スピーカー」）に移動すると、IonRouterOutlet はアニメーションを提供しないことを認識します。

IonRouterOutlet 内のスイッチ

IonRouterOutlet はどのルートをレンダリングするかを決定するジョブを引き継ぐため、React Router の Switch を IonRouterOutlet 内で使用しても効果はありません。スイッチは、IonRouterOutlet の外で使用する場合は、引き続き期待どおりに機能します。

ユーティリティ

useIonRouter

useIonRouter フックは、Ionic React でのルーティングをより直接的に制御するために使用できます。React Router を呼び出す前に、カスタムアニメーションなどの追加のメタデータを Ionic に渡すことができます。

useIonRouter フックは、ルーティングに便利なメソッドをいくつか持つ UseIonRouterResult を返します。

type UseIonRouterResult = {
  /**
   * Navigates to a new pathname
   * @param pathname - The path to navigate to
   * @param routerDirection - Optional - The RouterDirection to use for transition purposes, defaults to 'forward'
   * @param routeAction - Optional - The RouteAction to use for history purposes, defaults to 'push'
   * @param routerOptions - Optional - Any additional parameters to pass to the router
   * @param animationBuilder - Optional - A custom transition animation to use
   */
  push(
    pathname: string,
    routerDirection?: RouterDirection,
    routeAction?: RouteAction,
    routerOptions?: RouterOptions,
    animationBuilder?: AnimationBuilder
  ): void;
  /**
   * Navigates backwards in history, using the IonRouter to determine history
   * @param animationBuilder - Optional - A custom transition animation to use
   */
  goBack(animationBuilder?: AnimationBuilder): void;
  /**
   * Determines if there are any additional routes in the the Router's history. However, routing is not prevented if the browser's history has more entries. Returns true if more entries exist, false if not.
   */
  canGoBack(): boolean;
  /**
   * Information about the current route.
   */
  routeInfo: RouteInfo;
};

次の例は、useIonRouter の使用方法を示しています。

import { useIonRouter } from '@ionic/react';

const MyComponent: React.FC = () => {
  const router = useIonRouter();
  const goToPage = () => {
    router.push('/my-page', 'root', 'replace');
  };

  ...
}

詳細情報

Ionic が内部で使用する React Router 実装を使用した React でのルーティングの詳細については、https://v5.reactrouter.com/web でドキュメントを確認してください。

コミュニティから

Ionic 4 と React: ナビゲーション - Paul Halliday