React BrowserRouter与Apache2子目录配置：二级路径空白问题排查

• 核心原因：React项目编译后的静态资源（JS、CSS、图片等）使用了相对路径，当访问二级路由（如/login/verify）时，浏览器会从/login/目录下去请求资源，而这些资源实际存放在网站根目录的static（或类似）文件夹下，导致资源请求404，页面无法正常渲染。从控制台截图的报错能看出，正是静态资源加载失败引发的空白页面问题。

解决步骤 #

1. 修正React项目的资源路径配置

   • 在React项目根目录的package.json中添加"homepage": "/"，确保编译后的资源路径是基于网站根目录的绝对路径。
   • 重新执行npm run build生成新的编译文件，替换服务器上的旧文件。

2. 确认Apache站点配置生效

   • 检查/etc/apache2/sites-enabled/000-default.conf，确保目标目录开启了AllowOverride All，让.htaccess的规则能正常生效，示例配置片段：

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

   • 重启Apache服务：sudo systemctl restart apache2

3. 保留当前.htaccess规则
   你现在使用的.htaccess规则已经能正确将所有非文件请求重定向到index.html，适配React前端路由的需求，无需修改：

   Options -MultiViews
   RewriteEngine On
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule ^ index.html [QSA,L]
   

内容的提问来源于stack exchange，提问作者mxrvin.thiele