Thinkstream

Inertia アプリ内で他のページへのリンクを作成するには、通常 Inertia の <Link> コンポーネントを使用します。このコンポーネントは、標準のアンカー <a> リンクを軽くラップしたもので、クリックイベントをインターセプトし、ページ全体のリロードを防ぎます。これが、アプリケーションの読み込み後に Inertia がシングルページアプリ体験を提供する仕組みです。

リンクの作成

Inertia リンクを作成するには、Inertia の <Link> コンポーネントを使用します。このコンポーネントに指定した属性は、基になる HTML タグにプロキシされます。

デフォルトでは、Inertia はリンクをアンカー <a> 要素としてレンダリングします。ただし、as プロップを使用してタグを変更できます。

メソッド

Inertia リンクのリクエストに使用する HTTP メソッドは、method プロップで指定できます。リンクで使用されるデフォルトのメソッドは GET ですが、method プロップを使うことで、リンク経由で POST、PUT、PATCH、DELETE リクエストを送信できます。

Wayfinder

v2.0.6+

Wayfinder を Link コンポーネントと併用する場合、生成されたオブジェクトをそのまま href プロップに渡すことができます。Link は Wayfinder オブジェクトから HTTP メソッドと URL を自動的に推論します。

データ

POST または PUT リクエストを行う際、追加のデータをリクエストに含めたい場合があります。これは data プロップを使用して実現できます。指定するデータは object または FormData のインスタンスにできます。

カスタムヘッダー

headers プロップを使用すると、Inertia リンクにカスタムヘッダーを追加できます。ただし、Inertia が内部的に状態をサーバーへ伝達するために使用するヘッダーが優先されるため、これらを上書きすることはできません。

ブラウザ履歴

replace プロップを使用すると、ブラウザの履歴の挙動を指定できます。デフォルトでは、ページ遷移は新しい状態を履歴にプッシュ（window.history.pushState）しますが、replace プロップを true に設定することで、現在の履歴状態を置き換える（window.history.replaceState）ことも可能です。これにより、履歴スタックに新しい状態を追加する代わりに、現在の状態が置き換えられます。

状態の保持

preserve-state プロップを使用すると、ページコンポーネントのローカル状態を保持できます。これにより、ページコンポーネントが完全に再レンダリングされるのを防ぎます。preserve-state プロップは、フォームを含むページで特に有用で、入力フィールドを手動で再設定する必要を避けられるほか、フォーカス中の入力を維持することもできます。

スクロールの保持

preserveScroll プロップを使用すると、ページ遷移時に Inertia が自動的にスクロール位置をリセットするのを防ぐことができます。

スクロール位置の管理について詳しくは、スクロール管理のドキュメントを参照してください。

パーシャルリロード

only プロップを使用すると、そのページへの後続の訪問時に、ページのプロップ（データ）の一部のみをサーバーから取得するよう指定できます。

このトピックについて詳しくは、パーシャルリロードに関する完全なドキュメントを参照してください。

ビュートランジション

viewTransition プロップを true に設定することで、リンクにビュートランジションを有効にできます。これにより、ブラウザの View Transitions API を使用してページ遷移をアニメーション表示します。

アクティブ状態

現在のページに基づいてナビゲーションリンクにアクティブ状態を設定するのは一般的です。Inertia では、page オブジェクトを参照し、page.url や page.component プロパティに対して文字列比較を行うことでこれを実現できます。

完全一致（===）、startsWith() による比較（ページのサブセットを一致させるのに便利）、あるいは正規表現を用いたより複雑な比較も行えます。

この方法を使えば、クラス名の設定だけに限定されません。アクティブ状態に応じて、リンクテキストを変更したり、リンクがアクティブであることを示す SVG アイコンなど、任意のマークアップを条件付きでレンダリングできます。

データ読み込み属性

リンクがアクティブなリクエストを実行している間、リンク要素に data-loading 属性が追加されます。これにより、読み込み中の状態に応じてリンクをスタイルできます。リクエストが完了すると、この属性は削除されます。