Spring Boot整合React项目访问前端路由返回404错误如何解决

你遇到的404问题是因为React使用了BrowserRouter模式，前端路由完全由客户端控制，后端没有对应路径的映射规则，当用户直接访问/login这类前端路由或刷新页面时，Spring Boot找不到对应资源就会返回404。你提供的maven打包配置是正常的，无需修改。

方案一：配置Spring MVC视图转发规则（推荐） #

新增Spring MVC配置类，将所有非静态资源、非API接口的请求转发到React的入口index.html，代码如下：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebRouteConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 匹配单级路径，自动排除带后缀的静态资源（js/css/png等）
        registry.addViewController("/{path:[^\\.]*}")
                .setViewName("forward:/index.html");
        // 匹配多级前端路由，比如/user/info/settings这类多层路径
        registry.addViewController("/**/{path:[^\\.]*}")
                .setViewName("forward:/index.html");
    }
}

Spring MVC会优先匹配你定义的/api开头的接口映射，只有没有匹配到对应接口/静态资源的请求才会走转发规则，不会影响后端接口调用。

方案二：自定义404错误转发 #

如果不想写路由匹配规则，也可以通过自定义错误处理器，把所有404请求转发到index.html：

import org.springframework.boot.web.servlet.error.ErrorController;
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;

@RestController
public class FrontendErrorController implements ErrorController {
    @RequestMapping("/error")
    public String handleError(HttpServletRequest request) {
        Integer statusCode = (Integer) request.getAttribute("javax.servlet.error.status_code");
        if (HttpStatus.NOT_FOUND.value() == statusCode) {
            return "forward:/index.html";
        }
        return "请求错误，状态码：" + statusCode;
    }
}

• 如果项目集成了Spring Security，需要将前端路由相关路径放行，避免被权限拦截，/api开头的接口保留原有权限控制逻辑即可。
• 如果可以接受URL带#前缀，也可以将React的路由模式改为HashRouter，无需后端配置即可解决404问题。

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