引导程序在laravel react ui中不起作用

Question

我已经使用php artisan ui react使用react UI设置了我的新laravel项目。是否安装了npm和npm run dev。将react id和脚本链接添加到welcome.blade.php。现在，示例react组件正在加载，但是该页面上不存在引导样式。我的代码如下，app.js：

​

require('./bootstrap');



require('./components/Example');

​

Example.js：

​

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

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;

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

​

我使用的是laravel 8.12。我是不是遗漏了什么？

Answer 1

您需要包含样式：

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

到<div id="example"></div>所在位置的welcome.blade.php视图文件

Answer 2

我在使用bootstrap ui时遇到了分页错误的问题。

此外，我建议将此代码添加到AppServiceProvider中。

use Illuminate\Pagination\Paginator;

public function boot()
{
     Paginator::useBootstrap();
}