ナビゲーションサービス 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 関数をインポートします。
1import { NavigationMixin } from "lightning/navigation";コンポーネントの基本クラスに NavigationMixin 関数を適用します。
1export default class MyCustomElement extends NavigationMixin(LightningElement) {}ページを定義するプレーン JavaScript の PageReference オブジェクトを作成します。
ナビゲーション要求をディスパッチするには、ナビゲーションサービスの [NavigationMixin.Navigate]({pageReference}, [{replace}]) 関数をコールします。{replace} が true に設定されている場合、ユーザが [戻る] ボタンを 2 回押さなくてもいいように、{pageReference} はブラウザ履歴にある既存のエントリを置き換えます。デフォルト値は、false です。
1navigateNext() {
2 this[NavigationMixin.Navigate]({
3 type: 'standard__navItemPage',
4 attributes: {
5 apiName: this.tabName,
6 },
7 });
8 }次の例は、取引先ホームページへのリンクを示しています。ユーザがリンクをクリックすると、click イベントハンドラである handleClick がナビゲーションサービスの Navigate メソッドをコールし、取引先ホームページが読み込まれます。取引先ホームの URL はアンカータグでも使用できます。それによって、ユーザはリンクをコピー、または新しいウィンドウで開くことができます。
1<!-- navigationLinkExample.html -->
2<template>
3 <div>
4 <a href={url} onclick={handleClick}>Account Home</a>
5 </div>
6</template>コンポーネントの JavaScript ファイルで、ナビゲーションサービスをインポートします。
取引先ホームページに移動して URL を生成するために、ナビゲーションサービスは PageReference オブジェクトを使用します。PageReference オブジェクトである accountHomePageRef は、コンポーネントが DOM に挿入されるときに connectedCallback() ライフサイクルフックで定義されます。ナビゲーションサービスは、取引先ホームの URL を url プロパティに保存します。これはテンプレートで使用されます。
handleClick ハンドラもコンポーネントの JavaScript クラスで定義され、ページ参照 accountHomePageRef に移動します。
1// navigationLinkExample.js
2import { LightningElement, wire } from "lwc";
3import { NavigationMixin } from "lightning/navigation";
4
5export default class NavigationLinkExample extends NavigationMixin(LightningElement) {
6 url;
7
8 connectedCallback() {
9 // Store the PageReference in a variable to use in handleClick.
10 // This is a plain Javascript object that conforms to the
11 // PageReference type by including 'type' and 'attributes' properties.
12 // The 'state' property is optional.
13 this.accountHomePageRef = {
14 type: "standard__objectPage",
15 attributes: {
16 objectApiName: "Account",
17 actionName: "home",
18 },
19 };
20 this[NavigationMixin.GenerateUrl](this.accountHomePageRef).then((url) => (this.url = url));
21 }
22
23 handleClick(evt) {
24 // Stop the event's default behavior.
25 // Stop the event from bubbling up in the DOM.
26 evt.preventDefault();
27 evt.stopPropagation();
28 // Navigate to the Account Home page.
29 this[NavigationMixin.Navigate](this.accountHomePageRef);
30 }
31}関連トピック
The Japanese Summer '24 guide is now live
j