如何在服务器子目录部署React应用？配置homepage后仍无法运行

我之前也踩过React子路径部署的坑，咱们一步步排查解决：

1. 先确认homepage配置的实际生效情况 #

你设置的"homepage": "https://funnel.garritz.com/doncarro"语法是对的，但要验证构建后的产物是否正确应用了这个路径。去build/index.html里看看JS、CSS等资源的引用路径，应该是/doncarro/static/js/xxx.js这种带子路径前缀的形式。如果不是，试试删除node_modules和package-lock.json，重新安装依赖后再执行npm run build。

2. 服务器路由重写是核心问题（90%的子路径故障根源） #

React是单页应用，所有路由请求都需要转发到index.html，服务器必须配置这个规则：

• 如果用Nginx，在站点配置里添加：

  location /doncarro {
    alias /实际的构建文件目录路径;
    try_files $uri $uri/ /doncarro/index.html;
  }
  

  注意alias要指向你上传的build文件夹所在路径，try_files规则会把所有子路径下的非文件请求都转到index.html。
• 如果用Apache，在构建目录里新建.htaccess文件，写入：

  RewriteEngine On
  RewriteBase /doncarro/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /doncarro/index.html [L]
  

3. 检查React Router的basename配置（如果用了路由） #

如果你用了React Router，必须给路由组件设置basename属性，让前端路由知道自己在子路径下：

import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router basename="/doncarro">
      {/* 你的路由组件内容 */}
    </Router>
  );
}

没设置这个的话，前端路由会默认以根路径解析，导致页面跳转和资源加载全部失效。

4. 确认部署文件的放置位置 #

要确保你把build文件夹里的所有文件（index.html、static文件夹等）直接上传到服务器的/doncarro对应目录下，而不是把整个build文件夹放进去。比如服务器上的路径应该是/var/www/funnel.garritz.com/doncarro/index.html，而不是/var/www/funnel.garritz.com/doncarro/build/index.html。

5. 强制清除浏览器缓存 #

浏览器缓存的旧资源可能会干扰新部署的内容，试试用Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，或者打开开发者工具勾选「禁用缓存」后重新加载。

按这些步骤排查下来，基本能解决子路径部署的问题，重点先看服务器路由重写和basename配置这两项。

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