Laravel + Inertia で React上で値をどこからでも扱えるようにしたい。

Laravel + Inertia + Reactで構築した環境では、
バックエンド(Laravel)からフロントエンド(React)に値を渡す時は、
通常は下記のようにコントローラでレンダリングするPageコンポーネントを値を渡します。

    public functionindex()
    {
        $posts = Post::orderBy('id','desc')->take(5)->get();

        return Inertia::render('Post/Index', [
            'posts' => $posts,
        ]);
    }

しかし、Pageコンポーネントではなくて例えばヘッダーやフッター、ボタンなど
ページとして表示するcomponentではなくてパーツ的なcomponentにバックエンドから
値を渡す時にコントローラから値を渡すことに違和感を感じた(そもそも可能なんでしょうか？)ので
他の方法をご紹介します。

shared-dataを利用する

コントローラを使わずに値を渡す方法が公式にありました。

公式document
https://inertiajs.com/shared-data

Middlewareの中にHandleInertiaRequests.php
というファイルがあり、ここで値を渡す処理を書けばいいみたいです。
デフォでは下記のようになっています。

HandleInertiaRequests.php

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Inertia\Middleware;
use Tighten\Ziggy\Ziggy;

class HandleInertiaRequests extends Middleware
{
    /**
     * The root template that is loaded on the first page visit.
     *
     * @var string
     */
    protected $rootView = 'app';

    /**
     * Determine the current asset version.
     */
    public function version(Request $request): string|null
    {
        return parent::version($request);
    }

    /**
     * Define the props that are shared by default.
     *
     * @return array<string, mixed>
     */
    public function share(Request $request): array
    {
        return [
            ...parent::share($request),
            'auth' => [
                'user' => $request->user(),
            ],
            'ziggy' => fn () => [
                ...(new Ziggy)->toArray(),
                'location' => $request->url(),
            ],
        ];
    }
}

ここの部分に追記していけば良さそうですね。

public function share(Request $request): array
    {
        return [
            ...parent::share($request),
            'auth' => [
                'user' => $request->user(),
            ],
            'ziggy' => fn () => [
                ...(new Ziggy)->toArray(),
                'location' => $request->url(),
            ],
        ];
    }

では、適当に文字列を渡してみます。

public function share(Request $request): array
    {
        return [
            ...parent::share($request),
            'auth' => [
                'user' => $request->user(),
            ],
            'value' => 'あいうえお',
            'ziggy' => fn () => [
                ...(new Ziggy)->toArray(),
                'location' => $request->url(),
            ],
        ];
    }

この値をReactでは下記のようにすれば使用できます。
"usePage"を使って値を使えるようにします。

//HandleInertiaRequests.phpのデータを受け取りに"usePage"使う
import { usePage } from '@inertiajs/react';//

export default function Footer() {
    const { value } :any= usePage().props;  
    return (
        <footer className="">
            <div>{value}</div>
        </footer>
    );
}

以上です。