集成 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，确认InertiaMiddleware::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' <p>export default defineConfig({ plugins: [react()], resolve: { alias: { '@': '/resources/js' } } })
创建根 React 布局与页面渲染
接下来设置前端入口文件，连接 Inertia 与 React。
- 创建主组件 App.jsx：
在resources/js/App.jsx中写入：import { createInertiaApp } from '@inertiajs/react' import { render } from 'react-dom' <p>createInertiaApp({ resolve: name => require(<code>./Pages/${name}</code>), setup({ el, App, props }) { render(<App {...props} />, el) }, }) - 更新 Blade 模板加载 JS：
打开resources/views/app.blade.php，确保有挂载点：
编写 React 页面并从 Laravel 路由返回
现在可以创建 React 页面并通过控制器返回。
- 创建一个 React 页面组件：
在resources/js/Pages/Home.jsx：import { usePage } from '@inertiajs/react' <p>export default function Home() { const { props } = usePage() return <h1>欢迎来到 {props.appName}</h1> } - 在 Laravel 控制器中返回 Inertia 响应：
使用 Artisan 创建控制器：
php artisan make:controller HomeController
编辑控制器方法：use InertiaInertia; <p>public function index() { return Inertia::render('Home', [ 'appName' => config('app.name') ]); } - 定义路由：
在routes/web.php添加：use AppHttpControllersHomeController; Route::get('/', [HomeController::class, 'index']);
启动开发服务器：
php artisan serve 和 npm run dev。
访问 http://localhost:8000，你应该能看到 React 渲染的页面内容。
基本上就这些。Inertia.js 让 Laravel 和 React 协同工作变得非常自然。数据通过 props 传递，页面跳转由 Inertia 内部处理，无刷新体验即刻拥有。不复杂但容易忽略的是路径解析和别名配置，确保 app/Http/Kernel.php0 函数能正确加载页面组件。
以上就是laravel如何集成Inertia.js和React_Laravel集成Inertia.js与React教程的详细内容，更多请关注php中文网其它相关文章！