Laravel Inertia Templating Issue

I’ve worked with Laravel and Angular before in a headless fashion where I was just building API endpoints with Laravel and consuming those with an Angular front-end but it was a few years ago. I’ve installed a new project with Inertia as an exercise to learn React but I’m confused and my searched have provided not results that I could leverage. I haven’t started an online course yet, I will soon, but until then I was hoping for a little direction as I muddle through things myself.

Basically, I was trying to remove the header code from "resources/js/Pages/Welcome.jsx" and place it in a component in "resources/js/Components/Header.jsx" but I don’t think I’m taking the correct aproach because while the component renders on the page the conditional directive (@if, @auth, etc) are just rendered on the page as strings and the URLs as well.

My Header.jsx file contents:

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>
)

}

And it renders like this:

Can anyone give me an idea of what I’m doing wrong or at least point me in the right direction? I’ve been looking on and off for a few days an have not found anything to leverage to solve this.

Thanks!

>Solution :

This is because you are using blade directives inside of a react file. You want to use react functionality instead like this:

export default function Header({ auth }) {
  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>
        {route().has('login') && (
            <nav class="-mx-3 flex flex-1 justify-end">
                {auth.user && (
                    <a
                        href="{route('dashboard')}"
                        class=“dashboard”
                    >
                        Dashboard
                    </a>
                )}
                {!auth.user && (
                    <a
                        href="{route('login')}"
                        class=“login”
                    >
                        Log in
                    </a>

                    {route().has('register') && (
                        <a
                            href="{route('register')}"
                            class=“register”
                        >
                            Register
                        </a>
                    )}
                )}
            </nav>
        )}
    </header>
)