react-router-dom嵌套路由下Logo无法加载问题求助

问题根源 #

你在Header组件里用了相对路径./images/jk_logo_horizontal.png引入public文件夹的图片。当进入嵌套路由（比如/reset_password/:id）时，浏览器会把这个相对路径解析成/reset_password/images/jk_logo_horizontal.png，但图片实际存放在项目根目录的/images/目录下，路径不匹配导致加载失败。

修复方案 #

方案1：使用根绝对路径 #

直接去掉路径开头的./，改用根路径开头的绝对路径：

修改Header组件中的img标签：

<img
  className='logo'
  loading='lazy'
  src='/images/jk_logo_horizontal.png'
  alt='logo'
/>

方案2：使用process.env.PUBLIC_URL（适配非根目录部署） #

如果你的项目需要部署在非根目录下，推荐用React提供的process.env.PUBLIC_URL拼接路径，确保路径始终指向public文件夹：

<img
  className='logo'
  loading='lazy'
  src={`${process.env.PUBLIC_URL}/images/jk_logo_horizontal.png`}
  alt='logo'
/>

原理说明 #

React项目中，public文件夹下的资源会被直接复制到打包后的根目录（或配置的公共URL目录）。使用根绝对路径或process.env.PUBLIC_URL，可以确保无论当前路由层级如何，浏览器都能正确定位到图片资源。

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