thinkstream

ルーティング

ルートの定義

Inertia を使用する場合、アプリケーションのすべてのルートはサーバーサイドで定義されます。つまり、Vue Router や React Router は必要ありません。代わりに、Laravel のルートを定義し、それらのルートから Inertia レスポンス を返すだけで済みます。

省略ルート

「FAQ」や「about」ページのように、対応するコントローラーメソッドを必要としない ページ がある場合、Route::inertia() メソッドを使ってコンポーネントへ直接ルーティングできます。

php
Route::inertia('/about', 'About');

URL の生成

一部のサーバーサイドフレームワークでは、名前付きルートから URL を生成できます。しかし、クライアントサイドではそれらのヘルパーを利用できません。それでも Inertia で名前付きルートを使う方法がいくつかあります。

最初の方法は、サーバーサイドで URL を生成し、それらを props として含めることです。この例では、edit_url と create_url を Users/Index コンポーネントに渡している点に注目してください。

php
class UsersController extends Controller
{
    public function index()
    {
        return Inertia::render('Users/Index', [
            'users' => User::all()->map(fn ($user) => [
                'id' => $user->id,
                'name' => $user->name,
                'email' => $user->email,
                'edit_url' => route('users.edit', $user),
            ]),
            'create_url' => route('users.create'),
        ]);
    }
}

Laravel を使用している場合、サーバーサイドのルートをクライアントサイドのコードから利用できるようにするための選択肢がいくつかあります。

Wayfinder

Wayfinder を使用すると、生成された TypeScript メソッドをそのまま Link コンポーネント、フォームヘルパー、または
ルーターメソッド に渡すことができ、Inertia はそれを適切に処理します。実際、Laravel の スターターキット のいずれかを使ってアプリケーションを開発している場合、Wayfinder はすでに設定されています。

Ziggy

Ziggy ライブラリを使うと、名前付きのサーバーサイドルートを、グローバルな route() 関数を通じて利用できるようになります。Ziggy に含まれる Vue プラグインを使用している場合、テンプレート内で直接 route() 関数を使うことができます。

vue
ユーザーを作成

サーバーサイドレンダリング が有効になっている場合、ssr.js ファイル内で Ziggy プラグインにオプションオブジェクトを渡すことができます。これには、ルート定義と現在のロケーションを含める必要があります。

js
.use(ZiggyVue, {
    ...page.props.ziggy,
    location: new URL(page.props.ziggy.location),
});

ページ URL のカスタマイズ

ページオブジェクト には、現在のページの URL を表す url が含まれています。デフォルトでは、Laravel アダプターは Request インスタンスの fullUrl() メソッドを使用してこれを解決しますが、スキームとホストを取り除き、相対 URL として返します。

URL の解決方法をカスタマイズしたい場合は、Inertia の HandleInertiaRequests ミドルウェアの urlResolver メソッド内でリゾルバーを提供できます。

php
class HandleInertiaRequests extends Middleware
{
    public function urlResolver()
    {
        return function (Request $request) {
            // リクエストの URL を返す...
        };
    }
}

あるいは、Inertia::resolveUrlUsing() メソッドを使ってリゾルバーを定義することもできます。

php
Inertia::resolveUrlUsing(function (Request $request) {
    // リクエストの URL を返す...
});