Laravel UI React项目中React组件无法渲染问题求助

架构老林

2026-8-20

Laravel 9 + Laravel UI React组件无法渲染的排查与解决

以下是针对组件无法渲染问题的实用排查步骤：

确认资源编译完成
运行以下命令安装依赖并编译资源：
```
npm install
npm run dev
```
检查webpack.mix.js是否包含React配置，确保有.react()：
```
mix.js('resources/js/app.js', 'public/js').react();
```
确保组件被引入到入口文件
打开resources/js/app.js，添加对example.jsx的引入：
```
import './example';
```
（如果你的example.jsx在子目录，路径要对应调整）

检查Blade模板的JS引入
在app.blade.php的</body>标签前，正确引入编译后的JS文件：

<!-- 开发环境用mix避免缓存 -->
<script src="{{ mix('js/app.js') }}"></script>
<!-- 生产环境可以用asset -->
<!-- <script src="{{ asset('js/app.js') }}"></script> -->

适配React 18的渲染方式
若安装的是React 18版本，ReactDOM.render已废弃，修改example.jsx的渲染代码：

import React from "react";
import { createRoot } from "react-dom/client";

function Example() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Example Component</div>
                        <div className="card-body">I'm an example component!</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Example;

const container = document.getElementById("example");
if (container) {
    const root = createRoot(container);
    root.render(<Example />);
}