基本的なナビゲーション

ナビゲーションサービス lightning/navigation を使用して、レコード、リストビュー、オブジェクトなどのさまざまなページ種別に移動します。また、ナビゲーションサービスを使用してファイルを開きます。

ナビゲーションサービスは URL の代わりに PageReference を使用します。PageReference はページ種別、その属性、ページの状態を記述する JavaScript オブジェクトです。PageReference を使用すると、コンポーネントが将来の URL 形式の変更から隔離されます。また、コンポーネントを複数のアプリケーションで使用することもでき、それぞれに異なる URL 形式を使用できます。

PageReference プロパティ説明必須
typeStringLightning Experience、エクスペリエンスビルダーサイト、または Salesforce モバイルアプリケーションでのナビゲーション用に PageReference オブジェクトを定義します。PageReference 型によって一意の URL が生成され、その型のすべてのページに適用される属性が定義されます。エクスペリエンスビルダーサイトでは、ページ種別によっては、PageReference プロパティの要件が LWR サイトと Aura サイトとで異なる場合があります。「PageReference の型」を参照してください。はい
attributesObject対象ページを判断する名前-値ペアの対応付け。ページ種別は、可能な属性名のセットとその各値の種別を定義します。はい
stateObject文字列キーと文字列値を持つキー - 値ペアのセット。このパラメーターは、特定のページ内のコンテンツを条件付きでカスタマイズします。一部のページの参照タイプでは、標準の state プロパティのセットがサポートされます。名前空間に置かれている場合に限り、標準以外のプロパティを state に渡すこともできます。いいえ

ナビゲーションサービスは、2 つの API をコンポーネントのクラスに追加します。これらの API はクラスのメソッドなので、this から呼び出します。

  • [NavigationMixin.Navigate](pageReference, [replace])

    コンポーネントは this[NavigationMixin.Navigate] をコールして、アプリケーションの別のページに移動します。

  • [NavigationMixin.GenerateUrl](pageReference)

    コンポーネントは this[NavigationMixin.GenerateUrl] をコールして、URL に解決する promise を取得します。コンポーネントは、アンカーの href 属性で URL を使用できます。また、window.open({url}) ブラウザー API を使用して新しいウィンドウを開くために URL を使用することもできます。

  1. コンポーネントの JavaScript クラスで lightning/navigation モジュールから NavigationMixin 関数をインポートします。

  2. コンポーネントの基本クラスに NavigationMixin 関数を適用します。

  3. ページを定義するプレーン JavaScript の PageReference オブジェクトを作成します。

  4. ナビゲーション要求をディスパッチするには、ナビゲーションサービスの [NavigationMixin.Navigate](pageReference, [replace]) 関数をコールします。replacetrue に設定されている場合、ユーザーが [戻る] ボタンを 2 回押さなくてもいいように、pageReference はブラウザー履歴にある既存のエントリを置き換えます。デフォルト値は、false です。

次の例は、取引先ホームページへのリンクを示しています。ユーザーがリンクをクリックすると、click イベントハンドラーである handleClick がナビゲーションサービスの Navigate メソッドをコールし、取引先ホームページが読み込まれます。取引先ホームの URL はアンカータグでも使用できます。それによって、ユーザーはリンクをコピー、または新しいウィンドウで開くことができます。

コンポーネントの JavaScript ファイルで、ナビゲーションサービスをインポートします。

取引先ホームページに移動して URL を生成するために、ナビゲーションサービスは PageReference オブジェクトを使用します。PageReference オブジェクトである accountHomePageRef は、コンポーネントが DOM に挿入されるときに connectedCallback() ライフサイクルフックで定義されます。ナビゲーションサービスは、取引先ホームの URL を url プロパティに保存します。これはテンプレートで使用されます。

handleClick ハンドラーもコンポーネントの JavaScript クラスで定義され、ページ参照 accountHomePageRef に移動します。

関連トピック