Laravel+React Inertia表单提交出现404 Not Found错误求助

我是Laravel新手，自学阶段。用Laravel结合React Inertia开发时，从/p/create页面提交表单到/p路由时出现404 Not Found错误，找不到问题所在。相关代码如下：

路由代码 #

Route::get('/p/create', function () {
    return Inertia::render('Posts');
})->name('posts.create');

Route::post('/p', [PostController::class, 'store'])->name('posts.store');

PostController代码 #

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class PostController extends Controller
{

    public function store()
    {
        dd(request()->all())
    }
}

React 页面表单代码 #

export default function Posts({ auth }) {
    return (
        <div className="post">
            <Navbar auth={auth} />

            <form
                encType="multipart/form-data"
                action="{{ route('posts.store') }}"
                method="POST"
            >
                <input
                    type="hidden"
                    name="_token"
                    value="{!! csrf_token() !!}"
                />

                <input type="file" name="image" />
                <textarea name="caption" />
                <button type="submit">Post</button>
            </form>
        </div>
    );
}

路由列表（php artisan route:list输出） #

PS E:\PHP projects\new and final\back\Instagram> php artisan route:list

  GET|HEAD  / .................................................................................. generated::1UHNC2h1AcGloyZQ
  POST      _ignition/execute-solution ....... ignition.executeSolution › Spatie\LaravelIgnition › ExecuteSolutionController  
  GET|HEAD  _ignition/health-check ................... ignition.healthCheck › Spatie\LaravelIgnition › HealthCheckController  
  POST      _ignition/update-config ................ ignition.updateConfig › Spatie\LaravelIgnition › UpdateConfigController
  GET|HEAD  confirm-password .................................... password.confirm › Auth\ConfirmablePasswordController@show  
  POST      confirm-password ........................ generated::vG6ZS3cMZcBju2hz › Auth\ConfirmablePasswordController@store  
  GET|HEAD  dashboard ............................................................................................ dashboard  
  GET|HEAD  dashboard/{user} ................................................................................ dashboard.user  
  POST      email/verification-notification ......... verification.send › Auth\EmailVerificationNotificationController@store  
  GET|HEAD  forgot-password ..................................... password.request › Auth\PasswordResetLinkController@create  
  POST      forgot-password ........................................ password.email › Auth\PasswordResetLinkController@store  
  GET|HEAD  login ....................................................... login › Auth\AuthenticatedSessionController@create  
  POST      login .................................. generated::WxuQbzVnBo7s2ikB › Auth\AuthenticatedSessionController@store  
  POST      logout .................................................... logout › Auth\AuthenticatedSessionController@destroy  
  POST      p ........................................................................... posts.store › PostController@store  
  GET|HEAD  p/create .......................................................................................... posts.create
  PUT       password ...................................................... password.update › Auth\PasswordController@update  
  GET|HEAD  profile .................................................................. profile.edit › ProfileController@edit  
  PATCH     profile .............................................................. profile.update › ProfileController@update  
  DELETE    profile ............................................................ profile.destroy › ProfileController@destroy  
  GET|HEAD  register ....................................................... register › Auth\RegisteredUserController@create  
  POST      register ..................................... generated::UZNwLO2B8FS0PVb4 › Auth\RegisteredUserController@store  
  POST      reset-password ............................................... password.store › Auth\NewPasswordController@store  
  GET|HEAD  reset-password/{token} ...................................... password.reset › Auth\NewPasswordController@create  
  GET|HEAD  sanctum/csrf-cookie .......................... sanctum.csrf-cookie › Laravel\Sanctum › CsrfCookieController@show  
  GET|HEAD  up ................................................................................. generated::pquyE3RwESLgrYla
  GET|HEAD  verify-email ...................................... verification.notice › Auth\EmailVerificationPromptController  
  GET|HEAD  verify-email/{id}/{hash} ...................................... verification.verify › Auth\VerifyEmailController  

问题原因及解决办法 #

核心问题出在React组件里错误使用了Laravel Blade语法——React无法识别{{ route('posts.store') }}和{!! csrf_token() !!}这类Blade模板标记，它们会被直接当作字符串渲染，导致表单提交的地址是无效的{{ route('posts.store') }}，而非实际的/p路由，因此返回404。

正确实现步骤： #

1. 传递路由和CSRF令牌到React组件
   在返回Inertia页面的路由中，把路由地址和CSRF令牌作为props传递：

   Route::get('/p/create', function () {
       return Inertia::render('Posts', [
           'storeRoute' => route('posts.store'),
           'csrfToken' => csrf_token(),
       ]);
   })->name('posts.create');
   

2. 修改React表单代码
   使用组件props中的路由和令牌值：

   export default function Posts({ auth, storeRoute, csrfToken }) {
       return (
           <div className="post">
               <Navbar auth={auth} />
   
               <form
                   encType="multipart/form-data"
                   action={storeRoute}
                   method="POST"
               >
                   <input
                       type="hidden"
                       name="_token"
                       value={csrfToken}
                   />
   
                   <input type="file" name="image" />
                   <textarea name="caption" />
                   <button type="submit">Post</button>
               </form>
           </div>
       );
   }
   

3. 修复控制器语法错误
   PostController中dd(request()->all())末尾缺少分号，会导致PHP语法错误，修复后：

   public function store()
   {
       dd(request()->all());
   }
   

内容的提问来源于stack exchange，提问作者Naimur Sharon