React应用Apache部署：直接访问路由报404问题排查

你的配置存在几处问题，导致React路由直接访问时出现404，以下是具体修正步骤：

1. 修正httpd.conf配置 #

（1）修复Directory块的重复设置并开启.htaccess权限 #

原Directory块重复定义了Options，且未允许.htaccess生效，修改为：

<Directory "${SRVROOT}/htdocs"> 
    Options FollowSymLinks -Indexes
    AllowOverride All
    Require all granted
</Directory>

• FollowSymLinks：允许Apache跟随符号链接，是rewrite规则生效的前提
• -Indexes：禁止显示目录文件列表，保障站点安全
• AllowOverride All：允许.htaccess文件覆盖服务器基础配置，确保rewrite规则能生效

（2）清理VirtualHost中的冗余配置 #

你的VirtualHost里Redirect /localhost /和Alias /localhost "C:/Apache24/htdocs"属于冗余配置，ServerName localhost和DocumentRoot已经明确了站点根路径，这两行会干扰路由解析，删除后VirtualHost应改为：

<VirtualHost *:80>
  DocumentRoot "C:/Apache24/htdocs"
  ServerName localhost
</VirtualHost>

（将localhost:80改为*:80更通用，不影响本地访问）

（3）确保mod_rewrite模块已启用 #

在httpd.conf中找到以下行，去掉前面的#注释：

LoadModule rewrite_module modules/mod_rewrite.so

2. 确认.htaccess的正确性与位置 #

你的.htaccess规则本身符合React单页应用的标准rewrite要求，但需确保：

• .htaccess文件放在C:/Apache24/htdocs目录下（与React打包后的index.html同级）
• 文件命名正确为.htaccess（注意开头的点，Windows下创建时避免误命名为htaccess.txt）

3. 验证修复 #

完成以上修改后重启Apache服务器，直接访问localhost/contact，此时Apache会将请求转发到index.html，由React路由处理对应页面，不会再返回404。

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