WordPress域名下React应用路由失效问题求助

问题分析 #

• 版本1的.htaccess会把所有非文件/目录的请求转发到WordPress的index.php，导致React路由路径被WordPress接管，返回WP主题的404。
• 版本2排除了/app开头的请求，但服务器找不到这些路由对应的物理文件（React是单页应用，路由路径没有实际文件），所以返回服务器404。

解决方案 #

1. 调整根目录的.htaccess

保留排除/app请求的规则，确保React子目录的请求不被WordPress处理：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
# 排除/app开头的请求，交给子目录独立处理
RewriteCond %{REQUEST_URI} !^/app(/.*)?$ 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.php [L]
</IfModule>

2. 在/app子目录下创建.htaccess

添加规则将React路由请求转发到React的入口文件index.html：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /app/
# 非文件/目录的请求都转发到React的index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /app/index.html [L]
</IfModule>

3. 确认React配置与部署

• 确保BrowserRouter的basename配置正确，同时补充首页路由：

<BrowserRouter basename="/app">
  <Routes>
    {/* 首页路由 */}
    <Route path="/" element={<HomeComponent />} />
    {/* 子路由 */}
    <Route path="/seccion/subseccion/" element={<Component />} />
  </Routes>
</BrowserRouter>

• 执行npm run build后，将build文件夹内的所有文件（index.html、static等）完整上传到服务器的/app目录。

验证 #

• domain.com：WordPress博客正常加载
• domain.com/app：React应用首页正常
• domain.com/app/seccion/subseccion/：React路由组件正常渲染

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