如何配置.htaccess使指定路径下所有子路径都加载对应ReactJS应用

第一步：添加.htaccess重写规则 #

直接修改站点根目录的.htaccess文件，新增规则必须放在WordPress默认的重写规则之前，避免被WordPress原生规则覆盖，规则内容如下：

<IfModule mod_rewrite.c>
  RewriteEngine On

  # React子路径专属重写规则
  RewriteRule ^some-path/index\.html$ - [L]
  RewriteCond %{REQUEST_URI} ^/some-path/ [NC]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule ^some-path/.*$ /some-path [L]
</IfModule>

规则逻辑说明：

• 仅对前缀为/some-path/的请求生效，不会影响WordPress其他页面的正常访问
• 已存在的静态文件、目录、软链接会直接放行，不触发重写
• 所有符合条件的子路径请求统一重写到/some-path，由嵌入该页面的React应用接管前端路由

第二步：修改React应用配套配置（必做，否则路由会异常） #

• 在React项目的package.json中添加字段："homepage": "/some-path"
• 如果使用React Router，给路由实例添加basename属性：

  // React Router v6 示例
  <BrowserRouter basename="/some-path">
    {/* 原有路由配置 */}
  </BrowserRouter>
  

验证注意事项 #

部署后先清空浏览器缓存、WordPress站点缓存（如有安装缓存插件），再访问子路径测试即可。

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