Apache子目录部署React应用：React Router v4路由访问404问题求助

我太懂这种排查好几天却卡在原地的挫败感了！你已经做了几个核心配置，但大概率是某个细节没落实到位，咱们一步步梳理可能的问题：

1. 先确认.htaccess的配置和位置是否正确 #

这是Apache下解决单页应用路由404的核心，很多人要么规则写错，要么放错了位置。

• 位置：.htaccess必须放在你的子目录/myApp下面，也就是和build后的index.html同级。
• 正确的规则内容：

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

重点注意：

• RewriteBase必须严格匹配你的子目录路径，末尾的斜杠不能少
• 最后一行RewriteRule的目标路径要准确指向子目录下的index.html，不能写错

2. 验证BrowserRouter的basename配置 #

你已经设置了basename，但要确保没有多余的斜杠或者拼写错误：

// 正确写法（开头斜杠，无末尾斜杠）
<BrowserRouter basename="/myApp">
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/register" element={<Register />} />
  </Routes>
</BrowserRouter>

如果写成basename="/myApp/"（末尾带斜杠），可能会导致路由匹配异常，一定要检查。

3. 确认package.json的homepage和构建流程 #

• homepage属性要设置为你的子目录路径，两种写法都可以：

  "homepage": "/myApp/"
  // 或者完整URL
  "homepage": "https://www.example.com/myApp/"
  

• 每次修改homepage后，必须重新运行npm run build，然后把build后的所有文件（index.html、static目录）完整部署到Apache的/myApp子目录下，不要嵌套层级（比如不要把build文件夹整个放进去，要把里面的内容拿出来）。
• 可以打开build后的index.html，检查里面的css、js资源路径是否是/myApp/static/...这种格式，如果不是，说明构建时路径没生成对。

4. 检查Apache的核心配置（最容易忽略的点） #

即使.htaccess写对了，如果Apache本身不允许它生效，一切都是白搭：

• 打开Apache的配置文件（比如httpd.conf或者sites-available/000-default.conf），找到对应/myApp目录的配置块，确保AllowOverride All：

  <Directory "/var/www/html/myApp">
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
  </Directory>
  

  如果AllowOverride是None，.htaccess里的重写规则根本不会被执行。
• 还要确认Apache已经开启了mod_rewrite模块：
  • 对于Debian/Ubuntu系统，运行命令sudo a2enmod rewrite，然后重启Apache：sudo systemctl restart apache2
  • 对于CentOS/RHEL，打开httpd.conf，确保LoadModule rewrite_module modules/mod_rewrite.so这一行没有被注释，然后重启Apache：sudo systemctl restart httpd

5. 排除缓存和部署问题 #

• 清除浏览器缓存，或者用隐私模式访问测试，避免旧的资源干扰
• 确认部署的文件是最新build后的版本，没有遗漏static目录或者文件权限问题（比如Apache用户没有读取权限）

按照上面的步骤逐一排查，应该能解决手动输入路由404的问题。

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