集成 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'export default defineConfig({plugins: [react()],resolve: {alias: {'@': '/resources/js'}}})
创建根 React 布局与页面渲染
接下来设置前端入口文件，连接 Inertia 与 React。
集简云
软件集成平台，快速建立企业自动化与智能化
22 查看详情 
创建主组件 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，确保有挂载点：
Inertia App @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 InertiaInertia;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 内部处理，无刷新体验即刻拥有。不复杂但容易忽略的是路径解析和别名配置，确保 resolve 函数能正确加载页面组件。
以上就是laravel如何集成Inertia.js和React_Laravel集成Inertia.js与React教程的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/267161.html
微信扫一扫 
支付宝扫一扫 
