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