在 Laravel 视图中加载 React 组件时出现 404答案

【问题标题】：Getting 404 when loading React component in a Laravel view在 Laravel 视图中加载 React 组件时出现 404
【发布时间】：2021-09-08 14:39:56
【问题描述】：

我正在 Laravel 中构建一个使用 React 和 mix 构建的视图。它在/admin 提供服务，并且已经设置了控制器和路由。

我是这样做的：

`resources/views/admin/dashboard.blade.php`

<!DOCTYPE html>
<html>
    <body>
        <div id="admin"></div>
        <script src="{{ asset('js/components/Admin.js') }}"></script>
    </body>
</html>

`resources/js/app.js`

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

require('./components/Example');
require('./components/Admin')

`resources/js/components/Admin.js`

import React from 'react';
import ReactDOM from 'react-dom';

function AdminView() {
    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 AdminView;

if (document.getElementById('admin')) {
    ReactDOM.render(<AdminView />, document.getElementById('admin'));
}

`webpack.mix.js`

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .react()
    .sass('resources/sass/app.scss', 'public/css');

我已经运行了npm run serve 和php artisan serve 但我总是遇到这个错误：

GET http://localhost:8000/js/components/Admin.js net::ERR_ABORTED 404 (Not Found)

我该如何解决这个问题？我对 PHP 完全不熟悉。

【问题讨论】：

标签： javascript php reactjs laravel

【解决方案1】：

原来我必须将所有 React 文件添加到webpack.mix.js。所以，它看起来像这样：

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/components/component1.js')
    .js('resources/js/components/component2.js')
// Other components, views, etc goes here...
    .react()
    .sass('resources/sass/app.scss', 'public/css');

还有可能以编程方式将所有其他文件包含在resources/js 中。

【讨论】：