Laravel9+Breeze+React新增Testpage.jsx页面出现404问题求助

使用Laravel 9结合Laravel Breeze与React开发时，新建Testpage.jsx测试页面，点击链接后Laravel始终返回404页面。相关配置如下：

1. Welcome.jsx中的链接代码 #

<div className="ml-4 text-lg leading-7 font-semibold">
   <a href="/testpage"
      className="underline text-gray-900 dark:text-white"
   >
   Test
   </a>
</div>

2. routes/web.php中的路由配置 #

Route::get('/testpage', function () {
    return Inertia::render('Testpage');
});

3. resource/js/Pages/Testpage.jsx代码 #

import React from "react";

export default function Testpage() {
    return (
        <>
            <h1>TEST!!!!</h1>
        </>
    );
}

已运行npm run dev无报错，页面可见“Test”链接，但点击后显示404，浏览器网络面板无Testpage.jsx请求。

• 清除路由缓存：Laravel会缓存路由规则，新增路由后未清除缓存会导致新路由不生效，执行命令：

  php artisan route:clear
  

• 确认根模板配置：检查resources/views/app.blade.php是否正确配置Inertia的初始化代码，重点确保@vite指令能动态加载页面组件：

  <!DOCTYPE html>
  <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title inertia>{{ config('app.name', 'Laravel') }}</title>
          @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
          @inertiaHead
      </head>
      <body class="font-sans antialiased">
          @inertia
      </body>
  </html>
  

• 核对组件文件名大小写：Inertia对组件文件名大小写敏感，确保Testpage.jsx的文件名和路由中Inertia::render('Testpage')的名称完全一致，避免出现大小写不匹配的情况。

• 重启开发服务：npm开发服务或Laravel内置服务器可能缓存旧资源，分别重启两个服务：

  1. 终止当前npm run dev进程，重新执行启动
  2. 终止当前php artisan serve进程，重新执行启动

• 检查路由冲突：查看routes/web.php中是否有通配符路由（如Route::get('{any}', ...)）排在/testpage路由之前，这类路由会优先匹配请求，导致具体路由失效，需将通配符路由移至所有具体路由之后。

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