React应用清除浏览器缓存后404错误的修复方法咨询

嘿，我来帮你搞定这个困扰你的React路由404问题！

你的问题核心在于：React用的是客户端路由，当你刷新页面或者直接在地址栏输入某个子路由（比如/dashboard）时，Apache服务器会默认去寻找这个路径对应的物理文件或目录，找不到就返回404。我们需要让Apache把所有非静态资源的请求都转发到index.html，交给React的路由系统来处理。

修改你的.htaccess配置 #

把你现有的配置替换成下面的内容就行：

<IfModule mod_rewrite.c>
    Options +FollowSymLinks
    IndexIgnore */*
    RewriteEngine On

    # 保留你原来的HTTPS强制跳转逻辑
    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]

    # 关键：所有非真实文件/目录的请求都转发到index.html
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ /index.html [L]
</IfModule>

关键修改点说明 #

• 把原来的RewriteRule ^(.*) /改成了RewriteRule ^(.*)$ /index.html [L]：这一步是核心，告诉Apache当请求的路径不是真实存在的文件或目录时，直接把请求转到index.html，而不是根目录。[L]表示这是最后一条规则，不再继续处理后续规则。
• 删掉了RewriteCond %{REQUEST_FILENAME} !/$这个条件：这个条件会过滤掉末尾带斜杠的请求，但React路由的路径可能带或不带斜杠，去掉它能覆盖更多场景。
• 给HTTPS重定向加上了=301（可选但推荐）：301是永久重定向，有利于SEO和浏览器缓存重定向规则。

验证是否生效 #

1. 把修改后的.htaccess保存到项目根目录（和index.html同一层级）。
2. 要么重启Apache服务器，要么直接刷新浏览器测试：
   • 随便打开一个React路由页面，刷新后应该不会再出现404。
   • 直接在地址栏输入某个子路由，也能正常加载页面。

额外注意事项 #

• 确保你的Apache服务器已经启用了mod_rewrite模块（你的配置开头的<IfModule mod_rewrite.c>已经做了兼容判断，如果模块没开启，这部分规则会被忽略，要是还是有问题，记得检查这个模块是否开启）。

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