laravel如何集成Inertia.js和React_Laravel集成Inertia.js与React教程-Laravel-PHP中文网

laravel如何集成Inertia.js和React_Laravel集成Inertia.js与React教程

下次还敢

发布： 2025-10-11 19:41:01

原创

1127人浏览过

集成 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如何集成inertia.js和react_laravel集成inertia.js与react教程

想在 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'
<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，确保有挂载点：

<!DOCTYPE html>
<html>
  <head>
    <title>Inertia App</title>
  </head>
  <body>
    <div id="app" data-page="{{ json_encode($page) }}"></div>
    @vite('resources/js/App.jsx')
  </body>
</html>

登录后复制

编写 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 Inertia\Inertia;
<p>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 函数能正确加载页面组件。

以上就是laravel如何集成Inertia.js和React_Laravel集成Inertia.js与React教程的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Laravel入门教程：从零开始学习最流行的PHP框架 Laravel框架介绍：优雅的PHP开发新选择使用laravel来搭建php 不会php能学laravel吗 php laravel框架搭建