LWRで構築する英国紅茶ブランドサイト 「The Royal Brew」 制作日誌、第4弾です。
前回までで、商品詳細ページの「見た目（UI）」と「カート連携（LMS）」が完成しました。
しかし、画面左上にある 「パンくずリスト (Breadcrumbs)」 に目を向けてみてください。 Home / Shop / Orange Flower 今はただのテキストとして表示されているだけで、クリックしてもどこにも行けません。
今回は、このパンくずリストに命を吹き込み、LWRサイトにおける 「正しいページ遷移」 を実装します。
今回の記事で作成したコンポーネントの全ソースコードをGitHubで公開しています。 ぜひ Clone して、あなたの組織で動かしてみてください。
LWRにおける「遷移」の落とし穴
Salesforce開発者なら、画面遷移といえば lightning-navigation モジュールを使うのが常識です。 しかし、LWRサイト（Experience Cloud）では、社内用画面（Lightning Experience）と同じコードを書くと痛い目を見ます。
PageReferenceタイプの違い
社内用ではホーム画面への遷移に standard__namedPage を使いますが、LWRサイトでは comm__namedPage を使うのが一般的です。 ここを間違えると、クリックしても「無反応」という寂しい結果になります。
その他のエクスペリエンスビルダー独自のPageReferenceタイプ
以下のページ種別は特にExperience Cloud (LWR) サイト独自に設けられた PageReference タイプです。
- ログインページ / ログアウトページ:
comm__loginPage - 管理コンテンツページ (Salesforce CMS) :
standard__managedContentPage
実装：NavigationMixin を組み込む
それでは、商品詳細コンポーネント royalProductDetail.js を改修しましょう。
Step 1: クラスの定義（ここが最大の罠！）
まず、モジュールをインポートし、クラスをラップします。
ここで私が実際に遭遇したエラーを紹介しましょう。
Error:
TypeError: this[n.NavigationMixin.Navigate] is not a function
このエラーが出たら、原因は十中八九ここです。 extends LightningElement のままだと、ナビゲーション機能が継承されません。必ず extends NavigationMixin(LightningElement) に書き換える必要があります。
// royalProductDetail.js
import { LightningElement, api, wire } from 'lwc';
// ★ 1. NavigationMixinをインポート
import { NavigationMixin } from 'lightning/navigation';
// ... (その他のimport)
// ★ 2. ここ重要！ NavigationMixin(...) で囲む
export default class RoyalProductDetail extends NavigationMixin(LightningElement) {
// Homeへ戻る処理
navigateToHome(event) {
// リンクのデフォルト動作（href遷移）をキャンセル
event.preventDefault();
this[NavigationMixin.Navigate]({
type: 'comm__namedPage', // LWRではこれを使う
attributes: {
name: 'Home' // 標準のホーム画面のAPI参照名
}
});
}
// Shopへ戻る処理（今回はHomeと同じ挙動に設定）
navigateToShop(event) {
event.preventDefault();
this[NavigationMixin.Navigate]({
type: 'comm__namedPage',
attributes: {
name: 'Home'
}
});
}
// ... (その他のコード)
}Step 2: HTMLでリンクを作る（SEO対策）
次にHTML側です。
単に div onclick={...} で実装することもできますが、それはSEO（検索エンジン最適化）的によくありません。Googleのクローラーは <a> タグの href を辿ってサイトを巡回するからです。
そこで、以下のような 「ハイブリッド実装」 を行います。
<a>タグを使う。hrefには正しいURL（またはダミー）を入れる。onclickでpreventDefault()して、SPAとしての高速遷移を行う。
<div class="breadcrumbs">
<a href="/theroyalbrew/" onclick={navigateToHome} class="breadcrumb-link">Home</a>
<span class="separator">/</span>
<a href="/theroyalbrew/shop" onclick={navigateToShop} class="breadcrumb-link">Shop</a>
<span class="separator">/</span>
<span class="current">{name}</span>
</div>こうすることで、「人間には高速なSPA遷移」 を、「検索エンジンには正しいリンク構造」 を提供できます。
完成した画面遷移
これで、商品詳細ページから「Home」をクリックすると、画面のリロード（白画面の点滅）なしで、スムーズにトップページへ戻れるようになりました。
今回のまとめ
LWRサイトのナビゲーション実装における3つの鉄則です。
comm__namedPageを使う: Experience Cloud 独自の記法を覚えましょう。extends NavigationMixin(...): これを忘れるとis not a functionエラーが出る。<a>タグ +preventDefault(): SEOとUXを両立させるベストプラクティス。
次回の制作日誌
これで、商品詳細ページの機能実装はすべて完了しました！
次回はこのサイトに 「AIエージェント（執事セバスチャン）」 を住まわせる、Agentforceの実装に挑戦します。お楽しみに。
参考URL
名前付きページ種別 (エクスペリエンスビルダーサイト)｜Lightning Web Components 開発者ガイド
読者の声