React单产品页面（/products/:id）Navbar组件资源加载路径错误

问题描述 #

用React开发单产品落地页时，在/products/:id路径下加载Navbar组件，组件内的图标资源会从/products/:id/[资源名]路径发起请求，但这些资源实际存放在项目根目录的./[资源名]路径下，导致图标无法正常加载。而在根路径/或其他非嵌套路径时，资源加载完全正常。

相关代码 #

App.js #

function App() {
  return (
    <Router>
      <Container>
        <Routes>
          <Route path="/"  element={<Home />} />
          <Route path="/products/:id" element= {<SingleProductPage/>} />
        </Routes>
      </Container>
    </Router>
  );
}

单产品页面（SingleProductPage.js） #

function SingleProductPage() {
  return (
    <div id="single-Container">
      <Navbar/>
      single page
    </div>
  )
}

Navbar组件 #

<div id="Navbar-SearchIcon" >
  <img src="../searchIcon.png" alt="" />
<div id="Navbar-BasketButton" >
   <img src="./basket-icon.png" alt="" />
      </div>

显示差异 #

• 根路径/或其他路径：Navbar图标正常显示
• /products/:id路径：Navbar图标无法加载

解决方案 #

问题核心是相对路径的解析逻辑：当页面处于/products/:id这类嵌套路径时，./会被解析为当前路径的子目录，../会被解析为/products/，而非项目根目录，导致资源请求路径错误。

你可以用以下几种方法修复：

1. 使用根绝对路径（最简单直接） #

直接以/开头指定资源路径，确保无论当前页面路径是什么，都从项目根目录加载资源：

<div id="Navbar-SearchIcon" >
  <img src="/searchIcon.png" alt="搜索图标" />
<div id="Navbar-BasketButton" >
   <img src="/basket-icon.png" alt="购物篮图标" />
      </div>

2. 导入资源文件（React官方推荐方式） #

在Navbar组件中直接导入资源文件，让Webpack等打包工具自动处理路径，还能享受资源优化：

import searchIcon from './searchIcon.png';
import basketIcon from './basket-icon.png';

// 组件内使用
<div id="Navbar-SearchIcon" >
  <img src={searchIcon} alt="搜索图标" />
<div id="Navbar-BasketButton" >
   <img src={basketIcon} alt="购物篮图标" />
      </div>

3. 使用PUBLIC_URL环境变量（适配部署场景） #

如果是Create React App创建的项目，可用process.env.PUBLIC_URL拼接路径，适配部署到子目录的场景：

<div id="Navbar-SearchIcon" >
  <img src={`${process.env.PUBLIC_URL}/searchIcon.png`} alt="搜索图标" />
<div id="Navbar-BasketButton" >
   <img src={`${process.env.PUBLIC_URL}/basket-icon.png`} alt="购物篮图标" />
      </div>

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