Laravel-Inertia-ReactJS项目中如何使用ReactJS路由？后端转全栈求助

Laravel-Inertia架构的核心是前后端路由同步，直接引入React Router会和Inertia自带的路由机制冲突，这就是你配置后失效的核心原因。下面给你两种可行的处理方式：

方案一：使用Inertia原生路由（推荐） #

这是最贴合Inertia架构的做法，完全不需要额外引入React Router：

• 后端Laravel侧：在routes/web.php里用Inertia路由定义页面，比如：

  // 基础页面路由
  Route::get('/dashboard', function () {
      return Inertia::render('Dashboard');
  });
  
  // 动态路由示例
  Route::get('/posts/{id}', function ($id) {
      return Inertia::render('Post/Show', ['post' => Post::find($id)]);
  });
  

• 前端React侧：用Inertia提供的<Link>组件做页面跳转，替代React Router的Link：

  import { Link } from '@inertiajs/react';
  
  function Navbar() {
      return (
          <nav>
              <Link href="/dashboard">仪表盘</Link>
              <Link href="/posts/1">查看文章</Link>
          </nav>
      );
  }
  

• 嵌套路由需求：可以通过Laravel路由分组，在前端页面组件中根据当前路由渲染对应子内容。比如后端定义Route::prefix('/admin')->group(function () { ... })，前端Admin页面组件里通过props.route判断当前子路由，渲染不同子组件。

方案二：强制引入React Router（不推荐） #

如果一定要用React Router，需要将Inertia的根组件嵌套在React Router内部，同时明确划分两者的路由范围：

1. 修改resources/js/app.jsx，包裹React Router：

   import { createRoot } from 'react-dom/client';
   import { BrowserRouter } from 'react-router-dom';
   import { createInertiaApp } from '@inertiajs/react';
   import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
   
   createInertiaApp({
       resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
       setup({ el, App, props }) {
           createRoot(el).render(
               <BrowserRouter>
                   <App {...props} />
               </BrowserRouter>
           );
       },
   });
   

2. 在独立页面组件内使用React Router的路由，比如创建Pages/ReactRouterContainer.jsx：

   import { Routes, Route, Link } from 'react-router-dom';
   import ReactHome from './ReactSubPages/Home';
   import ReactAbout from './ReactSubPages/About';
   
   export default function ReactRouterContainer() {
       return (
           <div>
               <Link to="/react/home">React路由首页</Link>
               <Link to="/react/about">React路由关于页</Link>
               <Routes>
                   <Route path="/react/home" element={<ReactHome />} />
                   <Route path="/react/about" element={<ReactAbout />} />
               </Routes>
           </div>
       );
   }
   

3. 注意：这种方式下，React Router管理的路由无法和Laravel后端路由同步，刷新页面时需要确保Laravel有对应的路由返回这个容器页面，否则会出现404。

常见踩坑点 #

• 不要混用Inertia的<Link>和React Router的<Link>，会导致路由拦截逻辑冲突；
• 必须明确划分Inertia和React Router的路由范围，避免同一层级路由被两者同时处理。

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