Laravel惯性模板问题

我以前曾以无头的方式与Laravel和Angular合作过,我只是用Laravel构建API端点,并使用Angular前端来消费这些端点,但这是几年前的事了。我安装了一个带有惯性的新项目作为学习React的练习,但我很困惑,我的搜索没有提供我可以利用的结果。我还没有开始一门在线课程,我很快就会开始的,但在那之前,我一直希望在自己应付事情的时候能得到一点指导。

基本上,我试图从“resources/js/Pages/Welcome.jsx”中删除头代码,并将其放置在“resources/js/Components/header.jsx“中的一个组件中,但我认为我没有采取正确的方法,因为当组件在页面上呈现时,条件指令(@if、@auth等)只是在页面上以字符串和URL的形式呈现。

我的Header.jsx文件内容:

export default function Header() {
  return (
<header class="grid grid-cols-2 items-center gap-2 py-10 lg:grid-cols-3">
            <div class="flex lg:justify-center lg:col-start-2">
                <svg></svg>
            </div>
            @if (Route::has('login'))
                <nav class="-mx-3 flex flex-1 justify-end">
                    @auth
                        <a
                            href="{{ url('/dashboard') }}"
                            class=“dashboard”
                        >
                            Dashboard
                        </a>
                    @else
                        <a
                            href="{{ route('login') }}"
                            class=“login”
                        >
                            Log in
                        </a>

                        @if (Route::has('register'))
                            <a
                                href="{{ route('register') }}"
                                class=“register”
                            >
                                Register
                            </a>
                        @endif
                    @endauth
                </nav>
            @endif
        </header>
)

}

它呈现如下:

有人能告诉我我做错了什么,或者至少给我指出正确的方向吗?我断断续续地看了几天,没有找到任何可以解决这个问题的方法。

谢谢!