Laravel Inertia React组件中Blade指令失效问题求助

你在React/Inertia的JSX组件里直接使用了Laravel Blade指令（@if、@auth、{{ ... }}），但两者运行环境完全不同：Blade指令是后端Laravel渲染Blade模板时解析的，而JSX组件是在前端浏览器中执行的，所以这些指令会被当成普通文本直接输出。

1. 从后端共享所需数据到前端 #

Inertia允许通过中间件向前端共享后端数据，修改app/Http/Middleware/HandleInertiaRequests.php的share方法，把认证状态、路由地址等需要的数据传递给前端：

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => $request->user(),
        ],
        'routes' => [
            'hasLogin' => Route::has('login'),
            'hasRegister' => Route::has('register'),
            'login' => route('login'),
            'register' => route('register'),
            'dashboard' => url('/dashboard'),
        ],
    ]);
}

2. 用React语法重构Header组件 #

在JSX中使用React的条件渲染替代Blade指令，通过Inertia的usePage钩子获取后端共享的数据：

import { usePage } from '@inertiajs/react';

export default function Header() {
    const { props } = usePage();
    const isAuthenticated = !!props.auth.user;
    const { hasLogin, hasRegister, login, register, dashboard } = props.routes;

    return (
        <header className="grid grid-cols-2 items-center gap-2 py-10 lg:grid-cols-3">
            <div className="flex lg:justify-center lg:col-start-2">
                <svg></svg>
            </div>
            {hasLogin && (
                <nav className="-mx-3 flex flex-1 justify-end">
                    {isAuthenticated ? (
                        <a
                            href={dashboard}
                            className="dashboard"
                        >
                            Dashboard
                        </a>
                    ) : (
                        <>
                            <a
                                href={login}
                                className="login"
                            >
                                Log in
                            </a>
                            {hasRegister && (
                                <a
                                    href={register}
                                    className="register"
                                >
                                    Register
                                </a>
                            )}
                        </>
                    )}
                </nav>
            )}
        </header>
    );
}

3. 额外注意事项 #

• JSX中必须用className替代class（class是JavaScript关键字，会触发语法错误）
• 推荐使用Inertia提供的Link组件替代普通<a>标签，实现前端无刷新跳转：

  import { Link } from '@inertiajs/react';
  // 示例：<Link href={dashboard} className="dashboard">Dashboard</Link>
  

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