Spring集成React Router时/xxx/xxx格式前端路由报404怎么解决

原有索引控制器的路径匹配规则无法覆盖多层路径，核心原因是：

• Spring MVC 单段路径占位符/{path:xxx}的匹配范围天然不包含斜杠，仅能匹配单层路径（如/database），遇到带斜杠的多层路径（如/startuppage/123）时无法命中规则
• 未命中控制器规则的请求会直接触发Spring的404响应，根本不会执行转发到index.html的逻辑，表现和访问未定义后端端点的报错完全一致
• 原有正则[^\\.]*本身没有路径结构的兼容问题，问题出在占位符的范围限制上

方案1：修正索引控制器路径规则 #

直接修改@RequestMapping的匹配范围，支持任意深度的多层路径，同时保留后端API、静态资源的排除逻辑，不影响原有业务：

@Controller
public class IndexController {
    @RequestMapping(value = {
        "/",
        "/{path:^(?!api)[^\\.]*}",
        "/**/{path:^(?!api)[^\\.]*}"
    })
    public String index() {
        return "index.html";
    }
}

规则说明：

• 新增/**/{path:...}通配匹配结构，支持任意层级的路径匹配，不管是单层的/database还是多层的/startuppage/123都能正常命中
• 正则中加入^(?!api)负向前瞻，确保所有/api开头的后端接口请求不会被这个规则拦截，原有API逻辑完全不受影响
• 保留[^\\.]*的匹配限制，确保带文件后缀的静态资源（如.js、.css、.png）不会被错误转发，交给Spring静态资源处理器正常响应

方案2（适配Spring Boot 2.4+版本）：通过视图控制器配置兜底转发 #

如果不想在Controller中写转发逻辑，可以在Web配置类中添加统一的视图转发规则，优先级低于现有API和静态资源规则：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 兜底匹配所有非api、带点号后缀的路径，转发到index.html
        registry.addViewController("/**/{path:^(?!api)[^\\.]*}")
                .setViewName("forward:/index.html");
        // 设置最低优先级，确保API、静态资源的规则先匹配
        registry.setOrder(Ordered.LOWEST_PRECEDENCE);
    }
}

你现有React Router的路由配置本身没有问题，只要后端能把所有非API、非静态资源的请求正确返回index.html，React Router会自动接管多层路径的渲染逻辑，不需要额外修改前端代码。

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