SPA 刷新 404 难题终结者boot-react SinglePageAppConfig pushState 资源解析器深度剖析【免费下载链接】boot-reactA starter application with spring boot and react项目地址: https://gitcode.com/gh_mirrors/bo/boot-reactboot-react是一个基于 Spring Boot React 的单页应用SPA启动器项目其核心类SinglePageAppConfig实现了一个pushState 资源解析器从根源上解决了 SPA 应用中刷新页面 404这一经典难题让 React Router 的 History 模式在后端服务器上也能完美工作。 为什么 SPA 刷新页面会 404先搞懂问题本质才能理解解决方案的巧妙之处。场景用户操作浏览器实际请求结果正常点击导航点私有页链接无请求JS 内部跳转✅ 页面正常刷新页面在/private按 F5GET /private❌ 服务器返回 404React Router 默认使用浏览器的History APIpushState来生成/login、/private这类干净的 URL。URL 变化时并没有真正向后端发起请求所以平时一切正常。但一旦刷新页面浏览器会带着完整 URL 向服务器发真实请求。而服务器上根本不存在名为private的文件或接口——它只是前端路由于是服务器一脸懵地返回 404。 核心矛盾前端路由是虚拟的而 HTTP 请求是真实的。boot-react 的前端路由定义在frontend/src/router/router.js中包含/首页列表、/private需登录的私有页见frontend/src/router/privateRoute.js、/login、/logout等路由。️ boot-react 的双环境解决方案boot-react 针对开发和生产两个环境分别做了处理思路殊途同归把所有找不到真实文件的请求统统回退fallback到index.html再交给 React Router 接管。开发环境connect-history-api-fallback开发时前端由独立的 Express 开发服务器托管项目用一行代码引入中间件 connect-history-api-fallback 实现回退frontend/server.js同时/api开头的请求被代理到后端的localhost:8080实现前后端联调零配置。生产环境SinglePageAppConfig 登场生产环境中前端构建产物index.html 打包后的 JS/CSS会被打进 Spring Boot 的 jar 包由 Spring MVC 的静态资源处理器统一分发。boot-react 通过SinglePageAppConfig类注册了一个自定义资源解析器源码位于backend/src/main/java/react/config/SinglePageAppConfig.java 深度剖析pushState 资源解析器的工作流程SinglePageAppConfig继承WebMvcConfigurerAdapter拦截所有路径/**并把静态资源指向classpath:/static/最后挂上一个内部类PushStateResourceResolver。它的决策逻辑非常清晰只需三步是 API 请求吗路径在忽略列表api中 → 不处理交还给 REST 接口是静态资源吗路径扩展名命中白名单js、css、html、png、svg、woff等 14 种→ 去static目录找真实文件都不是→ 判定为前端路由直接返回index.html核心解析方法resolve()的逻辑示意如下private Resource resolve(String requestPath, List? extends Resource locations) { if (isIgnored(requestPath)) { // /api/** 交给后端 return null; } if (isHandled(requestPath)) { // 带资源扩展名 → 找真实文件 return locations.stream() .map(loc - createRelative(loc, requestPath)) .filter(resource - resource ! null resource.exists()) .findFirst() .orElseGet(null); } return index; // 其他一切 → index.html }就这么简单得益于这个解析器用户在/private刷新时服务器返回index.html200 OKReact 加载后读取浏览器地址栏 URLReact Router 匹配到private路由并渲染私有页完美闭环 ✅ 快速上手一键运行 boot-react想亲手体验三步搞定1️⃣ 克隆仓库git clone https://gitcode.com/gh_mirrors/bo/boot-react cd boot-react2️⃣ 安装前端依赖需要 Node 6.0 和 yarncd frontend yarn3️⃣ 启动应用./gradlew bootRun启动后端时前端热重载开发服务器会自动拉起访问http://localhost:3000即可看到示例应用。生产模式打包部署则执行./gradlew clean assemble java -jar backend/build/libs/boot-react-0.0.1-SNAPSHOT.jar此时刷新/private不再 404正是SinglePageAppConfig在背后默默工作。 关键文件速查表文件作用backend/src/main/java/react/config/SinglePageAppConfig.java⭐ 生产环境 pushState 资源解析器本文主角frontend/server.js开发服务器含 history 回退与 API 代理frontend/src/router/router.jsReact Router 路由表定义frontend/src/router/privateRoute.js受保护路由未登录自动跳转登录页frontend/assets/index-template.htmlSPA 挂载入口div idrootfrontend/webpack.dev.config.js开发环境构建与热重载配置backend/src/main/java/react/config/SecurityConfiguration.javaSpring Security 安全配置README.adoc项目完整使用文档 总结boot-react 用不到百行的SinglePageAppConfig给出了 SPA 刷新 404 问题的教科书式解法✅白名单区分静态资源与路由请求互不干扰✅兜底返回 index.html让前端路由完全接管✅ 开发/生产双环境方案开箱即用无论是学习 Spring Boot 集成 React还是寻找一个干净、完整、带热重载和测试的 SPA 起步模板boot-react 都值得纳入你的工具箱。【免费下载链接】boot-reactA starter application with spring boot and react项目地址: https://gitcode.com/gh_mirrors/bo/boot-react创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 SPA 刷新 404 难题终结者：boot-react SinglePageAppConfig pushState 资源解析器深度剖析
SPA 刷新 404 难题终结者boot-react SinglePageAppConfig pushState 资源解析器深度剖析【免费下载链接】boot-reactA starter application with spring boot and react项目地址: https://gitcode.com/gh_mirrors/bo/boot-reactboot-react是一个基于 Spring Boot React 的单页应用SPA启动器项目其核心类SinglePageAppConfig实现了一个pushState 资源解析器从根源上解决了 SPA 应用中刷新页面 404这一经典难题让 React Router 的 History 模式在后端服务器上也能完美工作。 为什么 SPA 刷新页面会 404先搞懂问题本质才能理解解决方案的巧妙之处。场景用户操作浏览器实际请求结果正常点击导航点私有页链接无请求JS 内部跳转✅ 页面正常刷新页面在/private按 F5GET /private❌ 服务器返回 404React Router 默认使用浏览器的History APIpushState来生成/login、/private这类干净的 URL。URL 变化时并没有真正向后端发起请求所以平时一切正常。但一旦刷新页面浏览器会带着完整 URL 向服务器发真实请求。而服务器上根本不存在名为private的文件或接口——它只是前端路由于是服务器一脸懵地返回 404。 核心矛盾前端路由是虚拟的而 HTTP 请求是真实的。boot-react 的前端路由定义在frontend/src/router/router.js中包含/首页列表、/private需登录的私有页见frontend/src/router/privateRoute.js、/login、/logout等路由。️ boot-react 的双环境解决方案boot-react 针对开发和生产两个环境分别做了处理思路殊途同归把所有找不到真实文件的请求统统回退fallback到index.html再交给 React Router 接管。开发环境connect-history-api-fallback开发时前端由独立的 Express 开发服务器托管项目用一行代码引入中间件 connect-history-api-fallback 实现回退frontend/server.js同时/api开头的请求被代理到后端的localhost:8080实现前后端联调零配置。生产环境SinglePageAppConfig 登场生产环境中前端构建产物index.html 打包后的 JS/CSS会被打进 Spring Boot 的 jar 包由 Spring MVC 的静态资源处理器统一分发。boot-react 通过SinglePageAppConfig类注册了一个自定义资源解析器源码位于backend/src/main/java/react/config/SinglePageAppConfig.java 深度剖析pushState 资源解析器的工作流程SinglePageAppConfig继承WebMvcConfigurerAdapter拦截所有路径/**并把静态资源指向classpath:/static/最后挂上一个内部类PushStateResourceResolver。它的决策逻辑非常清晰只需三步是 API 请求吗路径在忽略列表api中 → 不处理交还给 REST 接口是静态资源吗路径扩展名命中白名单js、css、html、png、svg、woff等 14 种→ 去static目录找真实文件都不是→ 判定为前端路由直接返回index.html核心解析方法resolve()的逻辑示意如下private Resource resolve(String requestPath, List? extends Resource locations) { if (isIgnored(requestPath)) { // /api/** 交给后端 return null; } if (isHandled(requestPath)) { // 带资源扩展名 → 找真实文件 return locations.stream() .map(loc - createRelative(loc, requestPath)) .filter(resource - resource ! null resource.exists()) .findFirst() .orElseGet(null); } return index; // 其他一切 → index.html }就这么简单得益于这个解析器用户在/private刷新时服务器返回index.html200 OKReact 加载后读取浏览器地址栏 URLReact Router 匹配到private路由并渲染私有页完美闭环 ✅ 快速上手一键运行 boot-react想亲手体验三步搞定1️⃣ 克隆仓库git clone https://gitcode.com/gh_mirrors/bo/boot-react cd boot-react2️⃣ 安装前端依赖需要 Node 6.0 和 yarncd frontend yarn3️⃣ 启动应用./gradlew bootRun启动后端时前端热重载开发服务器会自动拉起访问http://localhost:3000即可看到示例应用。生产模式打包部署则执行./gradlew clean assemble java -jar backend/build/libs/boot-react-0.0.1-SNAPSHOT.jar此时刷新/private不再 404正是SinglePageAppConfig在背后默默工作。 关键文件速查表文件作用backend/src/main/java/react/config/SinglePageAppConfig.java⭐ 生产环境 pushState 资源解析器本文主角frontend/server.js开发服务器含 history 回退与 API 代理frontend/src/router/router.jsReact Router 路由表定义frontend/src/router/privateRoute.js受保护路由未登录自动跳转登录页frontend/assets/index-template.htmlSPA 挂载入口div idrootfrontend/webpack.dev.config.js开发环境构建与热重载配置backend/src/main/java/react/config/SecurityConfiguration.javaSpring Security 安全配置README.adoc项目完整使用文档 总结boot-react 用不到百行的SinglePageAppConfig给出了 SPA 刷新 404 问题的教科书式解法✅白名单区分静态资源与路由请求互不干扰✅兜底返回 index.html让前端路由完全接管✅ 开发/生产双环境方案开箱即用无论是学习 Spring Boot 集成 React还是寻找一个干净、完整、带热重载和测试的 SPA 起步模板boot-react 都值得纳入你的工具箱。【免费下载链接】boot-reactA starter application with spring boot and react项目地址: https://gitcode.com/gh_mirrors/bo/boot-react创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考