【Laravel×React】ページコンポーネントのレンダリングをInertiaで実装する

本記事の内容

Laravel×Reactの環境でページレンダリングを実装する方法について

手順については次のようになります。

• React側の設定
  • ① ルートコンポーネントでコンポーネントのオートロード設定をする
  • ② ページのコンポーネントを作成する
• Laravel側の設定
  • ③ コントローラーにInertiaを使ったページレンダリングのアクションを実装する
  • ④ コントローラーで実装したページレンダリングアクションに対してルーティングを設定する

一般的に

はじめは一般化した形で記します。

• React
  • ページとしてレンダリングしたいコンポーネント:○○Page.jsx　とします。
• Laravel
  • Reactコンポーネントのレンダリング機能を持たせるコントローラー：PageRenderingController とします。
  • ページをレンダリングするアクションを render○○Page とします。

① ルートコンポーネントでコンポーネントのオートロード設定をする

App.jsxのようなルートコンポーネントでページに関するコンポーネントがオートロードされるように設定をします

resources/js/app.jsx

import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot } from 'react-dom/client';

createInertiaApp({
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob('./Pages/**/*.jsx'),
        ),
    setup({ el, App, props }) {
        const root = createRoot(el);

        root.render(
          <>
            <App {...props} />
          </>
        );
    }
});

createInertiaAppとresolvePageComponentでInertia.jsを使ってjs/Pages/[ファイル名].jsxをオーとロードするように設定します。

② Reactでページのコンポーネントを作成する

Reactでページのコンポーネントを作成します。

• このページのコンポーネント名を○○Page.jsxとします。

js/Pages/[ファイル名].jsxのようなパスにあるファイルをオートロードするように設定したのでファイルを作成して、ページ内容を作成します。

touch js/Pages/○○Page.jsx

js/Pages/○○Page.jsx

(ページのレイアウト・内容などを設定)

③ Laravel側でInertiaの設定

コントローラーの設定

Inertiaを使って、コンポーネントをレンダリングするアクションを実装します。

src/app/Http/Controllers/PageRenderingController.php

<?php

namespace App\Http\Controllers;

use Inertia\Inertia;
use Illuminate\Http\Request;

class PageRenderingController extends Controller
{
    public function render⚪︎⚪︎Page()
    {
      return Inertia::render('⚪︎⚪︎Page', [
        ]
      );
    }
}

ルーティングの設定

実装したコントローラーに対するルーティングを設定します。

routes/web.php

use App\Http\Controllers\PageRenderingController;
Route::get('/(ページのpath)', [PageRenderingController::class, 'render⚪︎⚪︎Page']);

レンダリングできるかどうかの確認

設定したエンドポイントにアクセスして、レンダリングできるか確認します。

http://localhost/(ページのpath)

具体例

具体例を書きます。

① ルートコンポーネントでコンポーネントのオートロード設定をする

①の部分は変わらずです。

② Reactでページのコンポーネントを作成する

Reactでページのコンポーネントを作成します。
例えば、memberというレコードを追加するページをNewMemberPage.jsxをします。

touch js/Pages/NewMemberPage.jsx

③ Laravel側でInertiaの設定

コントローラーの設定

src/app/Http/Controllers/PageRenderingController.php

<?php

namespace App\Http\Controllers;

use Inertia\Inertia;
use Illuminate\Http\Request;

class PageRenderingController extends Controller
{
    public function renderNewMemberPage()
    {
      return Inertia::render('NewMemberPage', [
        ]
      );
    }
}

ルーティングの設定

routes/web.php

use App\Http\Controllers\PageRenderingController;
Route::get('/members/new', [PageRenderingController::class, 'renderNewMemberPage']);

レンダリングできるかどうかの確認

設定したエンドポイントにアクセスして、レンダリングできるか確認します。

http://localhost/members/new