You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Spring Boot配置contextPath后React BrowserRouter子路由访问失败问题

问题原因

核心问题出在Spring MVC的路由转发规则没有适配contextPath和前端路由:

  1. 路径匹配规则错误:配置*server.servlet.contextPath=/demo*后,Spring所有请求路径匹配都是基于contextPath之后的路径段,你配置的addViewController("/demo")实际匹配的是http://localhost:8088/demo/demo路径,你能正常访问/demo根路径是Spring默认静态资源寻址生效,和你配置的ViewController无关。
  2. 仅配置了单路径转发:只有根路径会被转发到index.html,/demo/recap、/demo/confirm这类子路径没有对应的转发规则,Spring会直接返回404,不会交给React路由处理。
解决方案

1. Spring Boot 侧修改

根据你的后端接口规则选其中一种方案即可:

方案A:通配符匹配所有前端路由(推荐,适合后端接口有统一前缀的场景)

如果你的后端接口都有统一前缀(比如/api/**),直接配置通配符匹配所有路径,统一转发到index.html,Spring会优先匹配接口,无匹配接口的请求才会走转发规则:

@Override
public void addViewControllers(ViewControllerRegistry registry) {
    // 路径不需要加/demo前缀,自动适配contextPath
    registry.addViewController("/**").setViewName("forward:/index.html");
}

方案B:固定匹配前端路由(适合后端接口无统一前缀的场景)

如果你没有给后端接口加统一前缀,就逐个匹配你所有的前端路由路径:

@Override
public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/").setViewName("forward:/index.html");
    registry.addViewController("/recap").setViewName("forward:/index.html");
    registry.addViewController("/confirm").setViewName("forward:/index.html");
}

可选:静态资源异常处理

如果修改后出现bundle.js加载失败的问题,添加资源处理器配置保证静态资源正常寻址:

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/**")
            .addResourceLocations("classpath:/static/");
}

2. React 侧校验

你已经修改BrowserRouter的basename="/demo"是正确的,路由path和history.push的写法无需调整。
如果使用create-react-app构建项目,需要在package.json中添加配置保证静态资源路径正确,修改后重新打包替换即可:

{
  "homepage": "/demo"
}

内容的提问来源于stack exchange,提问作者Noble

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.29 17:15:02