Inertia默认布局传参问题：Laravel React项目布局数据传递咨询

不用再手动给每个页面传布局props，也没必要在布局里额外调用API——用Inertia的全局数据共享+默认布局就能完美解决，步骤如下：

1. 后端共享全局数据 #

在Laravel后端把需要在布局里展示的数据（比如用户信息）全局共享给Inertia，这样前端所有页面加载时就能拿到数据，避免重复API请求。

修改app/Providers/AppServiceProvider.php：

use Inertia\Inertia;

public function boot()
{
    Inertia::share([
        'auth' => function () {
            return [
                'user' => auth()->user() ? [
                    'id' => auth()->user()->id,
                    'name' => auth()->user()->name,
                    'email' => auth()->user()->email,
                    // 按需添加其他需要展示的字段
                ] : null,
            ];
        },
    ]);
}

2. 前端布局组件直接取共享数据 #

在Layout组件里用Inertia提供的usePage钩子，直接获取后端共享的全局数据，不用再从页面组件手动传递props：

// Layout.jsx
import { usePage } from '@inertiajs/react'

export default function Layout({ children }) {
    const { auth } = usePage().props

    return (
        <div className="layout-container">
            <header>
                {/* 直接展示共享的用户信息 */}
                {auth.user && <span>欢迎回来，{auth.user.name}</span>}
            </header>
            <main>{children}</main>
        </div>
    )
}

3. 配置Inertia默认布局 #

修改createInertiaApp的resolve逻辑，给所有页面设置默认布局，彻底告别每个页面手动包裹Layout的操作：

import Layout from './Layout'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
    let page = pages[`./Pages/${name}.jsx`]

    // 给没有自定义布局的页面自动绑定默认布局
    page.default.layout = page.default.layout || (pageContent => <Layout children={pageContent} />)
    return page
  },
  // 其他原有配置（setup、title等）...
})

4. 页面组件简化写法 #

现在你的页面组件只需要专注于业务内容，不用再处理布局包裹和props传递：

// Pages/Show.jsx
export default function Show(props) {
    // 页面自身需要的props依然可以正常接收
    return (
        <div>
            <h1>详情页面</h1>
            {/* 页面业务内容 */}
        </div>
    )
}

5. 自定义页面布局（可选） #

如果某个页面需要使用特殊布局（比如登录页、注册页），只需要在对应页面组件里单独指定layout属性即可：

// Pages/Login.jsx
import AuthLayout from './AuthLayout'

export default function Login() {
    return <div>登录表单内容</div>
}

// 给当前页面绑定自定义布局
Login.layout = (pageContent) => <AuthLayout children={pageContent} />

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