Laravel 9(Inertia with React)中的路线链接不起作用

Question

刚刚开始试用Laravel 9(Inertia+Rreact(，并希望设置用户角色。我试着按照本指南中的步骤操作，但现在Navbar层上的登录/注册链接停止工作。但是注销链接运行良好。

直接键入并转到127.0.0.1/login或127.0.0.1/register可以很好地工作，路由也可以正常加载，但单击链接不会起任何作用(进度条会移动，但填满后什么也不会发生(。

是什么原因造成的？下面提供了我的auth.php、web.php、导航栏层和已验证/访客层的代码段。除了指南和以下文件中显示的更改外，其他一切都是默认的：

auth.php

use AppHttpControllersAuthAuthenticatedSessionController;
use AppHttpControllersAuthConfirmablePasswordController;
use AppHttpControllersAuthEmailVerificationNotificationController;
use AppHttpControllersAuthEmailVerificationPromptController;
use AppHttpControllersAuthNewPasswordController;
use AppHttpControllersAuthPasswordResetLinkController;
use AppHttpControllersAuthRegisteredUserController;
use AppHttpControllersAuthVerifyEmailController;
use IlluminateSupportFacadesRoute;
Route::middleware('guest')->group(function () {
Route::get('register', [RegisteredUserController::class, 'create'])
->name('register');
Route::post('register', [RegisteredUserController::class, 'store']);
Route::get('login', [AuthenticatedSessionController::class, 'create'])
->name('login');
Route::post('login', [AuthenticatedSessionController::class, 'store']);
Route::get('forgot-password', [PasswordResetLinkController::class, 'create'])
->name('password.request');
Route::post('forgot-password', [PasswordResetLinkController::class, 'store'])
->name('password.email');
Route::get('reset-password/{token}', [NewPasswordController::class, 'create'])
->name('password.reset');
Route::post('reset-password', [NewPasswordController::class, 'store'])
->name('password.update');
});
Route::middleware('auth')->group(function () {
Route::get('verify-email', [EmailVerificationPromptController::class, '__invoke'])
->name('verification.notice');
Route::get('verify-email/{id}/{hash}', [VerifyEmailController::class, '__invoke'])
->middleware(['signed', 'throttle:6,1'])
->name('verification.verify');
Route::post('email/verification-notification', [EmailVerificationNotificationController::class, 'store'])
->middleware('throttle:6,1')
->name('verification.send');
Route::get('confirm-password', [ConfirmablePasswordController::class, 'show'])
->name('password.confirm');
Route::post('confirm-password', [ConfirmablePasswordController::class, 'store']);
Route::post('logout', [AuthenticatedSessionController::class, 'destroy'])
->name('logout');
});

web.php

use AppHttpControllersAuthRedirectAuthenticatedUsersController;
use IlluminateFoundationApplication;
use IlluminateSupportFacadesRoute;
use InertiaInertia;
Route::get('/', function () {
return Inertia::render('Welcome', [
'canLogin' => Route::has('login'),
'canRegister' => Route::has('register'),
'laravelVersion' => Application::VERSION,
'phpVersion' => PHP_VERSION,
]);
});
// Route::get('/dashboard', function () {
//     return Inertia::render('Dashboard');
// })->middleware(['auth', 'verified'])->name('dashboard');
Route::group(['middleware' => 'auth'], function() {
Route::inertia('/dashboard', 'Dashboard')->name('dashboard');
Route::get("/redirectAuthenticatedUsers", [RedirectAuthenticatedUsersController::class, "home"]);
Route::group(['middleware' => 'checkRole:admin'], function() {
Route::inertia('/adminDashboard', 'AdminDashboard')->name('adminDashboard');
});
Route::group(['middleware' => 'checkRole:user'], function() {
Route::inertia('/userDashboard', 'UserDashboard')->name('userDashboard');
});
Route::group(['middleware' => 'checkRole:guest'], function() {
Route::inertia('/guestDashboard', 'GuestDashboard')->name('guestDashboard');
});
});

导航栏.jsx

import React, { useState } from 'react';
import ApplicationLogo from '@/Components/ApplicationLogo';
import { Link, usePage } from '@inertiajs/inertia-react';
import Dropdown from '@/Components/Dropdown';
import ResponsiveNavLink from '@/Components/ResponsiveNavLink';
export default function Navbar({ children }) {
const { auth } = usePage().props
const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false);
return (
<>
<nav className="bg-white border-b border-gray-100">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16">
<div className="flex">
<div className="shrink-0 flex items-center">
<Link href="/">
<ApplicationLogo className="block h-9 w-auto text-gray-500" />
</Link>
<span className="font-semibold text-xl tracking-tight">DrewL Dashboard</span>
</div>
</div>
<div className="hidden sm:flex sm:items-center sm:ml-6">
<div className="ml-3 relative">
<Dropdown>
<Dropdown.Trigger>
<span className="inline-flex rounded-md">
<button
type="button"
className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150"
>
{auth.user ? (
auth.user.name
) : (
<>
Log In/Register
</>
)}
<svg
className="ml-2 -mr-0.5 h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
</span>
</Dropdown.Trigger>
{auth.user ? (
<Dropdown.Content>
<Dropdown.Link href={route('logout')} method="post" as="button">
Log Out
</Dropdown.Link>
</Dropdown.Content>
) : (
<Dropdown.Content>
<Dropdown.Link href={route('login')} as="button">
Log in
</Dropdown.Link>
<Dropdown.Link href={route('register')} as="button">
Register
</Dropdown.Link>
</Dropdown.Content>
)}

</Dropdown>
</div>
</div>
<div className="-mr-2 flex items-center sm:hidden">
<button
onClick={() => setShowingNavigationDropdown((previousState) => !previousState)}
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
>
<svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path
className={!showingNavigationDropdown ? 'inline-flex' : 'hidden'}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
<path
className={showingNavigationDropdown ? 'inline-flex' : 'hidden'}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
</div>
<div className={(showingNavigationDropdown ? 'block' : 'hidden') + ' sm:hidden'}>
<div className="pt-4 pb-1 border-t border-gray-200">
<div className="px-4">
<div className="font-medium text-base text-gray-800">Welcome</div>
<div className="font-medium text-sm text-gray-500">Login now</div>
</div>
<div className="mt-3 space-y-1">
{auth.user ? (
<ResponsiveNavLink href={route('logout')} as="button" method="post" className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">
Log out
</ResponsiveNavLink>
) : (
<>
<ResponsiveNavLink href={route('register')} as="button" method="post" className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">
Register
</ResponsiveNavLink>
<ResponsiveNavLink href={route('login')} as="button" method="post" className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">
Log in
</ResponsiveNavLink>
</>
)}
</div>
</div>
</div>
</nav>
{children}
</>
);
}

已验证.jsx

import React from 'react';
import Navbar from '@/Layouts/Shared/Navbar.jsx';
export default function Authenticated({ auth, header, children }) {
return (
<Navbar>
<div className="min-h-screen bg-gray-100">
{header && (
<header className="bg-white shadow">
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">{header}</div>
</header>
)}
<main>{children}</main>
</div>
</Navbar>
);
}

Guest.jsx

import React from 'react';
import ApplicationLogo from '@/Components/ApplicationLogo';
import { Link } from '@inertiajs/inertia-react';
import Navbar from '@/Layouts/Shared/Navbar.jsx';
export default function Guest({ children }) {
return (
<Navbar>
<div className="min-h-screen bg-gray-100">
<div className="min-h-screen flex flex-col sm:justify-center items-center pt-0 bg-gray-100">
<div>
<Link href="/">
<ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
</Link>
</div>
<div className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
{children}
</div>
</div>
</div>
</Navbar>
);
}

Answer 1

想明白了。问题是因为我将登录/注册的方法指定为POST请求，而不是GET请求。将登录和注册的方法更改为GET(如下所示(解决了此问题。

<Dropdown.Link href={route('login')} method="get" as="button">
Log in
</Dropdown.Link>
<Dropdown.Link href={route('register')} method="get" as="button">
Register
</Dropdown.Link>