hx-replace-url

hx-replace-url 属性を使用すると、ブラウザの現在の URL を ロケーション履歴 に置き換えることができます。

この属性の可能な値を次に示します。

1. true は、検索された URL をブラウザのナビゲーションバーで置き換えます。
2. false は、継承により検索された URL が置き換えられる場合、検索された URL の置換を無効にします。
3. ロケーションバーに置き換える URL です。history.replaceState() どおり、相対的または絶対的指定が可能です。

次に例を示します。

<div hx-get="/account" hx-replace-url="true">
  Go to My Account
</div>

これにより、htmx が現在の DOM のスナップショットを localStorage に保存し、ブラウザのロケーションバーの URL /account’ を置き換えます。

別の例を示します。

<div hx-get="/account" hx-replace-url="/account/home">
  Go to My Account
</div>

これにより、ブラウザのロケーションバーの URL /account/home’ が置き換えられます。

メモ

• hx-replace-url は継承され、親要素に配置できます。
• HX-Replace-Url レスポンスヘッダー も同等の動作を行い、この属性をオーバーライドできます。
• hx-history-elt 属性 を使用すると、履歴キャッシュに保存される要素を変更できます。
• hx-push-url 属性 も同様のよく使用される属性で、現在の履歴エントリを置き換えるのではなく、新しい履歴エントリを作成します。