React项目Webpack打包后Browser History刷新/直接访问URL失效求助

你说得没错，这个问题确实是Tomcat服务器的配置导致的——因为React单页应用（SPA）的路由是前端路由，当你刷新页面或者直接输入相对URL时，浏览器会直接向Tomcat请求这个路径，但Tomcat的默认配置里并没有对应的资源，所以会返回404。改用Hash History能正常工作是因为Hash部分不会被发送到服务器，服务器只会处理#前面的路径，自然不会出错。

下面给你几个不用Hash History的有效解决方案，按推荐程度排序：

方法一：使用Tomcat的Rewrite Valve（最推荐） #

Tomcat提供了URL重写功能，可以把所有前端路由请求转发到index.html，让React的路由系统来处理。

1. 首先在你的Tomcat项目的WEB-INF目录下创建一个rewrite.config文件，内容如下：

RewriteCond %{REQUEST_PATH} !-f
RewriteCond %{REQUEST_PATH} !-d
RewriteRule ^/(.*)$ /index.html [L]

这段规则的意思是：如果请求的路径不是文件（!-f）也不是目录（!-d），就把所有请求重写到index.html。

2. 然后修改WEB-INF/web.xml，添加Rewrite Valve的配置：

<Context>
  <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
</Context>

如果你的项目已经有<Context>标签，直接把Valve标签加进去就行；如果没有，就新建整个<Context>块。

方法二：配置Tomcat的错误页面转发 #

这个方法更简单，利用Tomcat的错误页面机制，把404请求转发到index.html，让React路由接管。

在WEB-INF/web.xml中添加以下配置：

<error-page>
  <error-code>404</error-code>
  <location>/index.html</location>
</error-page>

这样当Tomcat找不到对应的资源时，就会返回index.html，React的路由系统就能正确解析当前URL了。

注意：这个方法可能会把真正的404请求（比如静态资源不存在）也转发到index.html，如果需要区分，可以结合方法一的规则，或者在React路由里添加一个专门的404页面。

方法三：如果是Spring Boot整合Tomcat的情况 #

如果你的项目是用Spring Boot打包成WAR部署到Tomcat，或者用内嵌Tomcat，可以通过编写一个Controller来转发所有前端路由请求：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class SpaForwardController {
    // 方式1：列出所有前端路由
    @GetMapping(value = {"/", "/about", "/contact"})
    public String forwardToIndex() {
        return "forward:/index.html";
    }

    // 方式2：更通用的匹配，排除API请求
    @GetMapping(value = "/**", headers = "Accept!=application/json")
    public String forwardAll() {
        return "forward:/index.html";
    }
}

这个方法的好处是不需要修改Tomcat的配置，完全在代码层面解决，但需要确保Controller的路径匹配不会覆盖你的API接口。

额外注意事项 #

• 确保你的React项目在webpack打包时，publicPath配置正确。如果是部署在Tomcat的根路径，publicPath设为"/"；如果是子路径（比如http://localhost:8080/my-app/），要设为"/my-app/"，否则静态资源会加载失败。
• 测试时记得重启Tomcat，确保配置生效。

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