LWCにおけるページ遷移とブラウザの履歴の小ネタ

はじめに

LWCで構築されたExperience Builder Siteでブラウザの履歴操作をさせたくないケースがあったので、検証してみた。

方法

• [NavigationMixin.Navigate](pageReference,[replace])の第二引数をtrueに設定する。

To dispatch the navigation request, call the navigation service’s [NavigationMixin.Navigate](pageReference, [replace]) function. If replace is set to true, the pageReference replaces the existing entry in the browser history so the user doesn’t have to press the back button twice. The default value is false.

引用：https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_navigate_basic

実装例

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class Page1 extends NavigationMixin(LightningElement) {
  
  goToNextPage() {
    this[NavigationMixin.Navigate]({
      type: 'comm__namedPage',
      attributes: { name: 'page2__c' }
    }, true);
  }

}

やってみた

第2引数がtrue（履歴なし）

第2引数がfalse（履歴あり）

所感

• JSで履歴操作する機会はあまりないが、知識がないと結構詰まる
• popstateイベントで履歴操作しようとすると、履歴が増えたり、イベント管理が大変だった(内容は割愛)
• LWCのリファレンスの充実を切に求む
  • Component Referenceにパラメータの説明書いて...

参考にしたサイト

• JSでブラウザの履歴を操作する - Qiita