React无头CMS搭配WordPress后端：非根页面刷新404及.htaccess问题求助

核心解决方案 #

通过在.htaccess中添加WordPress规则区块外的自定义重写规则，区分WordPress API/后台请求与React前端路由请求，同时避免WordPress自动覆盖配置。

1. 修改.htaccess文件 #

在# END WordPress之后添加以下自定义规则，确保API和后台请求正常，同时解决React路由刷新404问题：

# 自定义重写规则 - 区分WP后端与React前端路由
<IfModule mod_rewrite.c>
  # 优先处理WordPress API、后台及核心文件请求
  RewriteRule ^wp-json/ /index.php [L]
  RewriteRule ^wp-admin/ /index.php [L]
  RewriteRule ^wp-includes/ /index.php [L]
  
  # 其余非文件、非目录的请求，转发到React入口文件
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^ index.html [L]
</IfModule>

2. 配置React项目 #

• 在React项目的package.json中添加"homepage": "."，确保静态资源路径正确
• 执行npm run build构建项目，将build文件夹内的所有文件上传到服务器根目录（与WordPress核心文件同目录）

3. 验证WordPress固定链接 #

登录WordPress后台，进入「设置-固定链接」，选择「文章名」或其他非默认格式，点击保存（此操作会生成WordPress默认规则，但不会影响我们添加在区块外的自定义规则）

方案说明 #

• 把WordPress核心路径（wp-json/wp-admin/wp-includes）单独交给index.php处理，保证自定义API和后台功能正常
• 其余前端路由请求转发到React的index.html，解决BrowserRouter刷新非根页面404的问题
• 自定义规则写在# END WordPress之后，避免被WordPress保存固定链接时自动覆盖

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