集成 Inertia.js 可在 Laravel 中无缝使用 React 构建单页应用。1. 通过 Composer 安装 inertiajs/inertia-laravel 并运行 php artisan inertia:install 创建根模板；2. 确保 Inertia 中间件已注册；3. 使用 Vite 初始化 React 项目并安装 @inertiajs/react；4. 配置 vite.config.js 启用 React 插件并设置别名；5. 创建 resources/js/App.jsx 作为入口，调用 createInertiaApp 解析 Pages 目录下的组件；6. 更新 app.blade.php 添加挂载点并引入 @vite 指令；7. 在 resources/js/Pages/ 创建 Home.jsx 页面组件，利用 usePage 获取服务端传递的 props；8. 创建 HomeController，使用 Inertia::render('Home', [...]) 返回响应；9. 在 web.php 路由中绑定控制器方法；10. 同时启动 php artisan serve 和 npm run dev，访问页面即可获得无刷新的 SPA 体验。关键在于正确配置路径解析与别名，确保前端能加载页面组件。

想在 Laravel 项目中使用 React 并实现现代化的单页应用体验？集成 Inertia.js 是目前最简洁高效的方式。它让你无需构建独立的前端 API 服务，也能用 React 构建动态页面，同时保留 Laravel 的传统路由和控制器优势。

安装并配置 Inertia.js（Laravel 后端）

确保你有一个干净的 Laravel 项目。以下步骤将完成后端基础设置：

• 通过 Composer 安装 Inertia Laravel 适配器：
  composer require inertiajs/inertia-laravel
• 发布 Inertia 的视图文件：
  php artisan inertia:install
  这会创建 resources/views/app.blade.php 作为根模板。
• 确保路由中间件已注册：
  打开 app/Http/Kernel.php，确认 \Inertia\Middleware::class 已包含在 web 中间件组中。

设置前端环境（React + Vite 或 Webpack）

Inertia 支持主流构建工具。这里以更现代的 Vite 为例：

• 初始化前端项目：
  运行 npm init vite@latest，选择 React + JavaScript 模板，或直接使用以下命令：
  npm create vite@latest . -- --template react
• 安装 Inertia 及相关依赖：
  npm install @inertiajs/react @vitejs/plugin-react
• 配置 vite.config.js：
  修改 vite.config.js，启用 React 插件：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  export default defineConfig({
  plugins: [react()],
  resolve: {
  alias: {
  '@': '/resources/js'
  }
  }
  })
  

创建根 React 布局与页面渲染

接下来设置前端入口文件，连接 Inertia 与 React。

Playground AI

AI图片生成和修图

下载

• 创建主组件 App.jsx：
  在 resources/js/App.jsx 中写入：

  import { createInertiaApp } from '@inertiajs/react'
  import { render } from 'react-dom'
  createInertiaApp({
  resolve: name => require(./Pages/${name}),
  setup({ el, App, props }) {
  render(, el)
  },
  })
  

• 更新 Blade 模板加载 JS：
  打开 resources/views/app.blade.php，确保有挂载点：

  
  
    
      
    
    
      
  
      @vite('resources/js/App.jsx')
    
  
  

编写 React 页面并从 Laravel 路由返回

现在可以创建 React 页面并通过控制器返回。

• 创建一个 React 页面组件：
  在 resources/js/Pages/Home.jsx：

  import { usePage } from '@inertiajs/react'
  export default function Home() {
  const { props } = usePage()
  return 
  欢迎来到 {props.appName}
  }
  

• 在 Laravel 控制器中返回 Inertia 响应：
  使用 Artisan 创建控制器：
  php artisan make:controller HomeController
  编辑控制器方法：

  use Inertia\Inertia;
  public function index()
  {
  return Inertia::render('Home', [
  'appName' => config('app.name')
  ]);
  }
  

• 定义路由：
  在 routes/web.php 添加：

  use App\Http\Controllers\HomeController;
  Route::get('/', [HomeController::class, 'index']);
  

启动开发服务器：
php artisan serve 和 npm run dev。
访问 http://localhost:8000，你应该能看到 React 渲染的页面内容。

基本上就这些。Inertia.js 让 Laravel 和 React 协同工作变得非常自然。数据通过 props 传递，页面跳转由 Inertia 内部处理，无刷新体验即刻拥有。不复杂但容易忽略的是路径解析和别名配置，确保 resolve 函数能正确加载页面组件。