Vite项目使用createHashRouter路由失效，部署Github Pages需额外配置？

• 确认react-router-dom版本
  createHashRouter是react-router-dom v6.4及以上版本的API，先检查依赖版本：

  npm list react-router-dom
  

  若版本低于v6.4，执行升级命令：

  npm install react-router-dom@latest
  

• 使用Link组件实现导航
  禁止用原生<a>标签跳转，必须使用react-router-dom提供的<Link>组件，否则会触发页面刷新导致hash路由失效。示例：
  修改Home组件：

  import { Link } from 'react-router-dom';
  
  function Home() {
    return (
      <div className="App">
        Home
        <Link to="/about">跳转到About</Link>
      </div>
    )
  }
  
  export default Home
  

  修改About组件：

  import { Link } from 'react-router-dom';
  
  function About() {
    return (
      <div className="App">
        About
        <Link to="/">返回Home</Link>
      </div>
    )
  }
  
  export default About
  

• Vite子路径部署配置（可选）
  若项目部署在Github Pages子路径（如https://yourname.github.io/your-repo/），可在vite.config.js中设置base确保资源路径正确：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    base: '/your-repo-name/' // 替换为你的仓库名称
  })
  

• 标准部署流程

  1. 执行构建生成dist文件夹：

     npm run build
     

  2. 将dist内容推送到gh-pages分支，可借助gh-pages包自动部署：
     安装依赖：

     npm install gh-pages --save-dev
     

     在package.json中添加脚本：

     "scripts": {
       "build": "vite build",
       "predeploy": "npm run build",
       "deploy": "gh-pages -d dist"
     }
     

     执行部署：

     npm run deploy
     

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