React部署GitHub Pages后图片加载异常及刷新404问题求助

1. Tab切换时图片无法加载（第二、第三个Tab） #

部署到GitHub Pages后，"Units List"页面的第一个Tab（Protoss）能正常显示所有图片，但切换到Zerg和Terran Tab时图片加载失败。本地开发环境下所有Tab的图片均渲染正常，代码写法一致。

相关Tab容器代码：

<Tab.Container defaultActiveKey="Protoss" >
  <Container fluid className='unitListDisplayBackground'>
    <Row style={{ height: '10vh' }}></Row>
    <Row className='mt-5'>
      <h1>Units List</h1>
      <p>This is a page where you can view all playable units and see their stats</p>
    </Row>
    <Row>
      <Nav fill variant='tabs' defaultActiveKey="/home">
        <Nav.Item >
          <Nav.Link
            style={{ backgroundColor: '#393e46', color: '#ADD8E6', marginBottom: '1vh' }}
            eventKey="Protoss">
            <img
              src={process.env.PUBLIC_URL + "/assets/Icons/Protoss Icon.png"}
              alt='Protoss Icon'
              style={{ width: '50px', height: '50px' }}
            /></Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            style={{ backgroundColor: '#393e46', color: '#ADD8E6', marginBottom: '1vh' }}
            eventKey="Zerg">
            <img
              src={process.env.PUBLIC_URL + "/assets/Icons/Zerg Icon.png"}
              alt='Zerg Icon'
              style={{ width: '65px', height: '50px' }}
            />
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            style={{ backgroundColor: '#393e46', color: '#ADD8E6', marginBottom: '1vh' }}
            eventKey="Terran">
            <img
              src={process.env.PUBLIC_URL + "/assets/Icons/Terran Icon.png"}
              alt='Terran Icon'
              style={{ width: '50px', height: '50px' }}
            />
          </Nav.Link>
        </Nav.Item>
      </Nav>
      <Tab.Content>
        <Tab.Pane eventKey="Protoss" style={{ textAlign: 'center' }}>
          {/* Display the Protoss Units */}
          <ProtossUnits />
        </Tab.Pane>
        <Tab.Pane eventKey="Zerg" style={{ textAlign: 'center' }}>
          {/* Display the Zerg Units */}
          <ZergUnits />
        </Tab.Pane>

        <Tab.Pane eventKey="Terran" style={{ textAlign: 'center' }}>
          {/* First 3 Terran units */}
          <TerranUnits />
        </Tab.Pane>
      </Tab.Content>
    </Row>
  </Container>
</Tab.Container>

解决方案： #

• 统一子组件图片路径写法：检查<ZergUnits>和<TerranUnits>组件内的图片引用，确保所有图片路径都使用process.env.PUBLIC_URL + "/assets/..."的绝对路径格式。本地开发时相对路径可能生效，但部署后路由切换会导致相对路径指向错误（如从/UnitsList页面加载时，相对路径会变成/UnitsList/assets/...）。
• 核对文件名大小写：GitHub Pages文件系统区分大小写，而本地系统（如Windows）不区分。确保代码中引用的图片文件名（如Zerg Icon.png）和仓库中实际文件名完全一致，包括大小写和空格。
• 排查网络请求路径：打开浏览器开发者工具的Network标签，查看加载失败的图片请求路径，确认是否因路径错误导致404，再针对性修正。

2. 页面刷新出现404错误 #

使用BrowserRouter部署后，刷新非根路径页面（如/UnitsList）会出现404错误，不想使用HashRouter，需要替代方案。

路由代码：

class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter basename="starcraft2-unit-counter">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/UnitsList" element={<UnitsList />} />
            <Route path="/UnitCountersPage" element={<UnitCountersPage />} />
            <Route path="/ArmyCounterPage" element={<ArmyCounterPage />} />
          </Routes>
        </BrowserRouter>
      </div>
    )
  }
}

项目地址：https://johntrieseverything.github.io/starcraft2-unit-counter/

解决方案： #

方法1：添加404.html页面（GitHub Pages官方兼容方案）

1. 在项目public目录下创建404.html文件，内容完全复制index.html的代码。
2. 在index.html的<head>标签末尾添加以下脚本，处理路径重定向：

<script>
  (function() {
    const path = window.location.pathname;
    if (path !== '/' && !path.includes('.') && !path.includes('starcraft2-unit-counter')) {
      window.history.replaceState({}, '', '/starcraft2-unit-counter' + path);
      window.location.reload();
    }
  })();
</script>

3. 重新部署项目到GitHub Pages，刷新非根路径页面时，会先通过404.html加载，再由脚本修正路由指向正确页面。

方法2：使用_redirects文件（适合自定义域名场景）

如果使用自定义域名，在仓库根目录创建无后缀的_redirects文件，添加内容：

/* /index.html 200

该文件会告知GitHub Pages将所有请求转发到index.html，由React Router处理路由。注意此方法需启用GitHub Pages的自定义域名功能，或确保仓库设置中开启了"Enforce HTTPS"。

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