React Router 页面刷新后HTML继承背景图与Navbar Logo消失问题

问题根因 #

你遇到的资源丢失问题本质是相对路径解析错误，和React Router客户端路由的特性直接相关：

• 你当前引用背景图、Logo都用的是images/xxx这类不带前缀的相对路径，浏览器解析相对路径时会以当前页面的URL路径为基准
• 当你在/ATI这类一级路径刷新时，浏览器会把资源路径拼接为https://alphamedical.netlify.app/images/gradient.jpg，路径正确资源可以正常加载
• 当你在/ATI/HAMILTON-C1这类二级嵌套路径刷新时，浏览器会把资源路径拼接为https://alphamedical.netlify.app/ATI/images/gradient.jpg，该路径不存在，所以资源加载失败，背景图和Logo消失

解决方案 #

任选一种即可解决问题：

1. 所有静态资源引用改为绝对路径，在路径前加/：
   背景图样式修改为background: url(/images/gradient.jpg) no-repeat center center fixed;
   Navbar组件内的Logo引用也同步修改为/images/你的Logo文件名
   加根路径前缀后，浏览器会始终从站点根目录查找资源，不受当前路由层级影响
2. 在HTML的<head>标签内添加<base href="/" />，该配置会指定当前页面所有相对路径的默认基准为站点根目录，不需要修改其他资源引用代码
3. 如果你使用Create React App/Vite等构建工具，也可以用构建工具提供的公共路径变量拼接资源路径：
   • CRA用process.env.PUBLIC_URL + '/images/gradient.jpg'
   • Vite用import.meta.env.BASE_URL + 'images/gradient.jpg'
     该方案适配性更强，即使后续站点部署在子目录下也可以正常加载资源

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