基本的なナビゲーション

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

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

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

コンポーネントの JavaScript クラスで lightning/navigation モジュールから NavigationMixin 関数をインポートします。
コンポーネントの基本クラスに NavigationMixin 関数を適用します。
ページを定義するプレーン JavaScript の PageReference オブジェクトを作成します。
ナビゲーション要求をディスパッチするには、ナビゲーションサービスの [NavigationMixin.Navigate]({pageReference}, [{replace}]) 関数をコールします。{replace} が true に設定されている場合、ユーザが [戻る] ボタンを 2 回押さなくてもいいように、{pageReference} はブラウザ履歴にある既存のエントリを置き換えます。デフォルト値は、false です。

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

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

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

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

関連トピック

PageReference の型