如何让WordPress托管React应用？官网集成React应用可行性问询

当然可行！你完全不用把React应用部署到其他服务器，WordPress完全可以像托管普通页面一样托管它，这里给你几个实用的实现思路：

• 直接部署静态构建文件到WordPress目录
  这是最直接的方法：

  1. 先在本地运行 npm run build 生成React应用的静态构建文件，你会得到一个build文件夹，里面包含编译后的JS、CSS和HTML文件。
  2. 把build文件夹里的所有内容上传到WordPress主题的某个子目录下，比如 /wp-content/themes/你的主题名/react-app/（如果没有这个目录就新建一个）。
  3. 创建一个WordPress自定义页面模板，比如命名为page-react-app.php，内容如下：

     <?php
     /*
     Template Name: React应用页面
     */
     get_header(); ?>
     
     <!-- React应用的挂载容器 -->
     <div id="root"></div>
     
     <!-- 引入React构建后的脚本和样式 -->
     <script src="<?php echo get_template_directory_uri(); ?>/react-app/static/js/main.xxxx.js"></script>
     <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/react-app/static/css/main.xxxx.css">
     
     <?php get_footer(); ?>
     

     注意替换代码里的xxxx为构建文件实际的哈希值，或者更稳妥的方式是用WordPress的wp_enqueue_script和wp_enqueue_style函数来加载资源，避免版本缓存问题。
  4. 在WordPress后台新建一个页面，选择刚才创建的“React应用页面”模板，发布后就能访问你的React应用了。

• 利用WordPress短代码嵌入React应用
  如果不想自定义页面模板，也可以用短代码来嵌入：

  1. 同样先构建并上传React静态文件到WordPress目录。
  2. 在主题的functions.php中注册一个短代码：

     function embed_react_app_shortcode() {
         $react_url = get_template_directory_uri() . '/react-app/';
         ob_start(); ?>
         <div id="root"></div>
         <script src="<?php echo $react_url; ?>static/js/main.xxxx.js"></script>
         <link rel="stylesheet" href="<?php echo $react_url; ?>static/css/main.xxxx.css">
         <?php return ob_get_clean();
     }
     add_shortcode('react_app', 'embed_react_app_shortcode');
     

  3. 在任意WordPress页面或文章中插入[react_app]短代码，就能渲染你的React应用了。

• 处理客户端路由（如果React用了路由）
  如果你的React应用使用了客户端路由（比如React Router），需要在WordPress中设置重写规则，避免访问路由路径时出现404错误：

  1. 在主题的functions.php中添加重写规则：

     function react_app_rewrite_rules() {
         // 替换123为你的React应用页面的ID
         add_rewrite_rule('^react-app/(.+)/?$', 'index.php?page_id=123', 'top');
     }
     add_action('init', 'react_app_rewrite_rules');
     

  2. 登录WordPress后台，进入「设置」→「固定链接」，随便修改一下固定链接结构再保存，触发WordPress刷新重写规则。

额外注意事项 #

• 因为React应用和WordPress在同一个域名下，调用WordPress API时不会遇到CORS跨域问题，这是托管在WP服务器的一大优势。
• 如果你的WordPress使用了缓存插件，记得设置排除规则，避免缓存React的静态资源导致更新不生效。
• 你也可以把React静态文件上传到wp-content/uploads目录，或者WordPress根目录下的独立文件夹，只要确保WordPress能访问到这些文件即可。

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