Login and register linik in Breeze Layout-CodePudding

I use Breeze with React. As you know, we have a component Welcome.jsx and this component displays links to login and register if we aren't logged otherwise - link to Dashboard. It looks like this

        <div className="fixed top-0 right-0 px-6 py-4 sm:block">
            {props.auth.user ? (
                <Link href={route('dashboard')} className="text-sm text-gray-700 dark:text-gray-500 underline">
                    Dashboard
                </Link>
            ) : (
                <>
                    <Link href={route('login')} className="text-sm text-gray-700 dark:text-gray-500 underline">
                        Log in
                    </Link>

                    <Link
                        href={route('register')}
                        className="ml-4 text-sm text-gray-700 dark:text-gray-500 underline"
                    >
                        Register
                    </Link>
                </>
            )}
        </div>

But this component is into Pages folder. This component in props has a auth value even though I don't send that from controller. In web.php it looks like this

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
     ]);
});

We have 2 layouts but interested for me is Guest. I need to change this layout and first and the most important thing at this moment is create navbar with login and register links, or links to user settings, etc if user isn't login. But I don't know how do that. So in console I have an error that props.auth doesn't exist. For a trial i copied component Welcome to Guest but effect is this same. How can I display links to login and register if user isn't log in and other menu if he is? But it the most important thing - not in Pages folder.

CodePudding user response：

First of all do you use useAuth from 'hooks/auth' on the parent components?

Where does the props.auth.user came from?

CodePudding user response：

Or you can use something like they did on laravel-breeze-react repo

const Dashboard = () => {
const { logout, user } = useAuth({ middleware: 'auth' })

return (
    <>
        <p>{user?.name}</p>

        <button onClick={logout}>Sign out</button>
    </>
)