在 Laravel + Inertia + React 项目中，通过 Inertia::render() 传递的 PHP 数据需以 props 对象形式在 React 组件中访问；直接使用 {message} 会报错，必须写为 {props.message} 或通过解构参数获取。
在 laravel + inertia + react 项目中，通过 `inertia::render()` 传递的 php 数据需以 `props` 对象形式在 react 组件中访问；直接使用 `{message}` 会报错，必须写为 `{props.message}` 或通过解构参数获取。
在使用 Laravel Breeze + React 搭建的 Inertia 应用中，服务端通过 Inertia::render('ComponentName', $data) 向前端传递数据（如 'message' => 'You are logged in as BankUser'），这些数据会作为 React 组件的 props 注入，而非全局变量或作用域内直接可用的常量。
你遇到的 message is undefined 错误，根本原因在于 JSX 中错误地使用了裸变量：
{/* ❌ 错误：message 未声明，JSX 中无法直接访问 */}
<div>You're logged in - BankUser! {message}</div>React 函数组件接收的所有服务端数据都封装在 props 参数中。因此，正确的写法有两种等价方式：
✅ 方式一：通过 props.xxx 访问
export default function UserDashboard(props) {
return (
<Authenticated
auth={props.auth}
errors={props.errors}
message={props.message} // ✅ 正确：将 props.message 透传给子组件（如 Authenticated）
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} {/* ✅ 此处也需加 props. */}
</div>
</div>
</div>
</div>
</Authenticated>
);
}✅ 方式二：解构 props（更简洁、推荐）
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>
);
}? 补充说明与注意事项：
- Inertia 会自动将
Inertia::render()的第二参数（关联数组）序列化为 JSON，并作为 React 组件的props传入，无需额外配置； - 所有标准 Inertia 属性（如
auth,errors,ziggy）也会合并进props，因此解构时可一并写出； - 若某 prop 可能为
undefined（例如未在所有路由中统一传入），建议添加默认值或条件渲染：<div>{message ?? 'No message provided'}</div> // 或 {message && <p className="text-green-600">{message}</p>} - 确保控制器返回的键名与 JSX 中引用的名称完全一致（区分大小写），例如
'message' => ...对应{message}，而非{Message}或{MESSAGE}。
遵循以上规范，即可稳定、清晰地在 Inertia React 页面中接收并渲染服务端传递的数据。
