如何配置Nginx使React应用在WordPress站点子目录正常运行？

我之前碰到过几乎一模一样的场景，咱们一步步来搞定这个带slug的URL跳WordPress 404的问题：

1. 修复Nginx配置（核心问题） #

你的Nginx规则现在是普通前缀匹配，可能会被WordPress的正则重写规则“抢走”请求。咱们给location加上^~前缀，确保所有/reactApp开头的请求都优先由React的规则处理：

location ^~ /reactApp {
    root /var/www/example.com;
    index index.html;
    try_files $uri $uri/ /reactApp/index.html;
}

这里的^~是关键：它告诉Nginx，这个前缀匹配是最高优先级的，一旦请求路径以/reactApp开头，就直接用这个规则处理，不再去检查后面的正则location（比如WordPress用来处理PHP或全局URL重写的规则）。原来的普通前缀匹配会在处理后继续检查正则规则，导致带slug的请求被WordPress接管返回404。

2. 简化并确认React路由配置 #

你的路由配置大方向是对的，不过可以稍微调整得更清晰：
因为已经设置了basename={'/reactApp'}，路由路径里不需要再拼接process.env.PUBLIC_URL，直接写/:slug就可以，basename会自动帮你加上前缀：

ReactDOM.render(
  <Router basename={'/reactApp'}>
    <Route path={`/:slug`} component={ReadArticle}/>
  </Router>,
  document.getElementById('root')
);

当然你原来的写法也能正常工作，不过这样更直观。另外确认package.json里的homepage设置没问题，你当前的"homepage": "http://www.example.com/reactApp/"是正确的，它会确保React构建时生成的静态资源路径都带上/reactApp前缀。

3. 确认React构建产物的位置 #

运行npm run build后，把build文件夹里的所有内容（包括index.html、static文件夹等）完整复制到/var/www/example.com/reactApp/目录下，确保目录结构是这样的：

• /var/www/example.com/reactApp/index.html
• /var/www/example.com/reactApp/static/js/...
• /var/www/example.com/reactApp/static/css/...

4. 重启Nginx生效配置 #

修改完Nginx配置后，一定要重启服务让新规则生效：

sudo systemctl restart nginx

做完这些步骤后，再访问http://www.example.com/reactApp/article-name，应该就能正确加载你的ReadArticle组件，而不是跳WordPress的404页面了。

如果还有问题，可以检查WordPress后台的固定链接设置，确保没有针对/reactApp的自定义重写规则，但一般来说，只要Nginx的规则配置正确，WordPress就不会处理这些请求了。

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