Search code examples
laravellaravel-bladeinertiajs

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: enter image description here

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