如何将React集成到Yii2 Basic并配合GraphQL API构建SPA

1. 静态资源存放位置 #

首先将打包好的bundle.js放在Yii2项目的web目录下，推荐单独创建web/static/js/目录存放，避免和框架自带资源混淆。

2. 入口页面与bundle.js引入方案 #

根据你的业务场景选择以下两种方案即可：

方案1：全站为SPA（修改全局布局） #

适合整个站点都是React渲染的单页应用场景：

• 找到Yii2默认布局文件views/layouts/main.php，清空原有冗余布局代码，仅保留基础HTML结构，添加<div id="root"></div>容器并引入bundle.js，示例代码如下：

<?php
use yii\helpers\Html;

\yii\web\YiiAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>

<div id="root"></div>
<!-- 路径对应你存放bundle.js的web子目录 -->
<script src="/static/js/bundle.js"></script>

<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

• 配置路由规则，确保所有前端路由都返回SPA入口页，修改config/web.php下的urlManager配置：

'urlManager' => [
    'enablePrettyUrl' => true,
    'showScriptName' => false,
    'rules' => [
        // 优先保留GraphQL API路由，避免被SPA路由覆盖
        'graphql' => 'graphql/index',
        // 其余所有请求都指向入口控制器动作
        '<path:.*>' => 'site/index',
    ],
],

• 对应SiteController的actionIndex方法无需额外处理，直接渲染视图即可，views/site/index.php可以留空，因为布局已经包含全部需要的结构。

方案2：部分页面为SPA（单独创建入口） #

适合站点只有部分模块是React SPA的场景：

• 在对应控制器中新增SPA入口动作，以SiteController为例：

public function actionSpa()
{
    // 禁用全局默认布局
    $this->layout = false;
    return $this->render('spa');
}

• 新建视图文件views/site/spa.php，编写完整的SPA入口代码：

<?php
use yii\helpers\Html;
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?= Html::csrfMetaTags() ?>
    <title>React SPA</title>
</head>
<body>
    <div id="root"></div>
    <script src="/static/js/bundle.js"></script>
</body>
</html>

3. 注意事项 #

• 如果你的bundle.js打包时带哈希后缀（每次打包文件名变化），可以将其注册到Yii2的资源包（AssetBundle）中，框架会自动处理路径和缓存更新问题。
• React中发送POST请求到Yii2接口时，可以从页面的CSRF meta标签中提取token，放到请求头中避免跨站请求伪造校验失败。
• 如果开启了URL重写，确保web目录下的.htaccess配置正确，所有非静态资源请求都指向index.php。

内容的提问来源于stack exchange，提问作者user12828000