Filezilla配置.htaccess后React应用路由刷新404故障求助

前置检查 #

• 确认Apache已开启mod_rewrite模块
• 确认Apache站点配置中对应站点目录的AllowOverride All已配置，否则.htaccess规则不会生效

按部署路径适配.htaccess规则 #

场景1：React应用部署在站点子目录（如访问路径为https://your-domain.com/subdirectory/） #

你之前的配置错误点在于RewriteBase指定了子目录，但最终重写规则指向了根目录的index.html，路径不匹配导致404，使用以下修正后的配置：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /subdirectory/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
# 重写指向子目录下的index.html
RewriteRule . /subdirectory/index.html [L]
</IfModule>

同时需要额外确认：

• package.json中的homepage字段值为/subdirectory或完整域名加子目录路径
• React路由BrowserRouter组件添加basename="/subdirectory"属性，和部署路径完全匹配

场景2：React应用部署在站点根目录（如访问路径为https://your-domain.com/） #

不要添加子目录相关的RewriteBase规则，使用以下配置：

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

同时确认package.json的homepage字段值为/或站点根域名，BrowserRouter无需添加basename属性。

最终校验 #

• 打包后的index.html需和.htaccess放在部署目录的同级路径下
• 所有配置修改完成后，重启Apache服务并清空浏览器缓存再测试

内容的提问来源于stack exchange，提问作者Luka Miljković