Laravel Inertia React传参异常：message未定义问题排查

我使用Breeze+React启动套件，集成Spatie权限并完成角色、用户数据填充，编写了基于角色跳转的中间件和对应角色的专属仪表盘页面，功能正常，但后端传递的message变量在React视图中提示未定义。

相关代码如下：

app/Http/Middleware/CheckUserRole.php #

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class CheckUserRole
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse)  $next
     * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
     */
    public function handle(Request $request, Closure $next, ...$guards)
    {
        $user = Auth::user();
        if ($user->hasRole('BankAdmin')) {
            return redirect('/admin/dashboard');
        }
        if ($user->hasRole('BankUser')) {
            return redirect('/user/dashboard');
        }
        return redirect('/');
    }
}

routes/web.php #

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard',
    );
})->middleware(['auth', 'verified', 'checkrole'])->name('dashboard');

Route::get('/user/dashboard', UserDashboardController::class);

require __DIR__ . '/auth.php'; 

app/Http/Controllers/UserDashboardController.php #

<?php

namespace App\Http\Controllers;

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

class UserDashboardController extends Controller
{
    /**
     * Return all users.
     *
     * @return \Inertia\Response
     */
    public function __invoke()
    {
        return Inertia::render('UserDashboard', [
            'message' => 'You are logged in as BankUser',
        ]);
    }
}

resources/js/Pages/UserDashboard.jsx #

import React from 'react';
import Authenticated from '@/Layouts/Authenticated';
import {Head} from '@inertiajs/inertia-react';

export default function UserDashboard(props) {
    return (
        <Authenticated
            auth={props.auth}
            errors={props.errors}
            message={props.message}
            header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Dashboard</h2>}
        >
            <Head title="User Dashboard"/>

            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div className="p-6 bg-white border-b border-gray-200">You're logged in - BankUser!{message} </div>
                    </div>
                </div>
            </div>
        </Authenticated>
    );
}

问题根源 #

后端代码已经正确将message传递给Inertia视图，但React组件中直接使用{message}而非通过props访问，导致变量未定义——React组件接收的所有外部数据都封装在props对象中，不能直接引用变量名。

解决方法 #

有两种修改方式：

方式1：通过props.message访问变量

修改UserDashboard.jsx中的内容部分，将{message}改为{props.message}：

import React from 'react';
import Authenticated from '@/Layouts/Authenticated';
import {Head} from '@inertiajs/inertia-react';

export default function UserDashboard(props) {
    return (
        <Authenticated
            auth={props.auth}
            errors={props.errors}
            message={props.message}
            header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Dashboard</h2>}
        >
            <Head title="User Dashboard"/>

            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div className="p-6 bg-white border-b border-gray-200">You're logged in - BankUser!{props.message} </div>
                    </div>
                </div>
            </div>
        </Authenticated>
    );
}

方式2：解构props（更简洁）

在组件参数中解构所需的props，之后可以直接使用message：

import React from 'react';
import Authenticated from '@/Layouts/Authenticated';
import {Head} from '@inertiajs/inertia-react';

export default function UserDashboard({ auth, errors, message }) {
    return (
        <Authenticated
            auth={auth}
            errors={errors}
            message={message}
            header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Dashboard</h2>}
        >
            <Head title="User Dashboard"/>

            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div className="p-6 bg-white border-b border-gray-200">You're logged in - BankUser!{message} </div>
                    </div>
                </div>
            </div>
        </Authenticated>
    );
}

补充说明 #

如果你需要在Authenticated布局组件中使用message，需确保布局组件内部正确接收并处理该props，但这不是当前报错的直接原因，当前问题完全出在页面组件的变量访问方式上。

内容的提问来源于stack exchange，提问作者soundcake