React Vite应用部署GitHub Pages后路由404及跳转异常问题

你遇到的核心问题是导航栏使用原生<a>标签而非React Router的Link组件，导致客户端路由未生效，同时部分配置细节有误。以下是具体修复步骤：

1. 替换原生<a>为React Router的Link组件 #

原生<a>标签会触发页面硬刷新，无法识别HashRouter的basename配置，必须改用react-router-dom提供的Link组件实现客户端路由跳转：

// 先导入Link组件
import { Link } from 'react-router-dom';

return(
    <header id='main-header'>
        <Link to='/'> {/* 替换a标签为Link，href改为to */}
            <h3 id="business">Business</h3>
        </Link>
        <nav ref={navRef}>
            <Link to="/" className='link'>Home</Link>
            <Link to="/menu">Menu</Link>
            <Link to="/gallery">Gallery</Link>
            <Link to="/feedback">Feedback</Link>
            <button className='nav-btn nav-close-btn' onClick={toggleNavBar}>
                <FaTimes/>
            </button>
        </nav>
        <button className='nav-btn' onClick={toggleNavBar}>
            <FaBars/>
        </button>
    </header>
);

2. 修正package.json的homepage配置 #

当前homepage指向仓库地址，需改为GitHub Pages的实际访问地址：

{
  "name": "business",
  "homepage": "https://username.github.io/business/", // 修正为页面访问地址
  // ... 其他配置保持不变
}

3. 确认现有正确配置 #

你的以下配置已经符合要求，无需修改：

• index.js中HashRouter的basename='/business'
• vite.config.js中base: '/business/'
• App.js中的路由规则

为什么之前的尝试无效？ #

• 手动给<a>加/business前缀：硬刷新后GitHub Pages找不到对应静态文件，因为HashRouter的路由基于哈希结构（如/business/#/menu），原生a标签无法自动处理该逻辑。
• 直接修改Route路径：会破坏本地开发的路由逻辑，且未解决核心的跳转方式问题。

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