HashRouter与Spotify API集成问题：GitHub Pages部署登录跳转异常

方案一：改用BrowserRouter并适配GitHub Pages静态托管 #

GitHub Pages默认不支持单页应用的BrowserRouter路由，因为它只会返回对应路径的文件，而Vite仅生成index.html。解决这个问题只需三步：

1. 配置Vite的base路径
   在vite.config.js中设置与GitHub Pages仓库名称一致的base路径：

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   export default defineConfig({
     plugins: [react()],
     base: '/SpotifyWrapped-Client/' // 必须匹配你的GitHub Pages项目路径
   })
   

2. 创建404.html fallback文件
   复制public/index.html的完整内容，创建public/404.html。GitHub Pages会把所有未匹配到文件的请求（比如/dashboard）返回404.html，而这个文件和首页结构一致，BrowserRouter就能正常接管路由。

3. 切换回BrowserRouter并调整授权回调
   修改App组件使用BrowserRouter，同时更新Home组件的授权回调地址为Dashboard路径：

   // Home组件中的redirect地址
   const redirect_utl_after_login = encodeURIComponent("https://ochernobas.github.io/SpotifyWrapped-Client/dashboard")
   

   授权完成后，Spotify会跳转到/dashboard，GitHub Pages返回404.html，BrowserRouter处理路由，同时#access_token会留在URL的hash中，你可以在Dashboard组件里提取并处理：

   // Dashboard组件中提取token
   useEffect(() => {
     const hashParams = new URLSearchParams(window.location.hash.slice(1))
     const token = hashParams.get('access_token')
     if (token) {
       localStorage.setItem('spotify_token', token)
       // 清除hash避免重复处理
       window.history.replaceState(null, '', window.location.pathname)
     }
   }, [])
   

方案二：保留HashRouter并处理授权后的hash冲突 #

如果坚持使用HashRouter，核心思路是让Spotify授权回调到根路径，再手动处理token并跳转路由：

1. 修改授权回调地址为项目根路径
   更新Home组件的redirect_utl_after_login为项目根地址：

   const redirect_utl_after_login = encodeURIComponent("https://ochernobas.github.io/SpotifyWrapped-Client/")
   

2. 在App入口处理token并跳转路由
   在App组件中添加逻辑，检测URL中的access_token，提取后跳转到Dashboard的hash路由：

   // App组件中添加useEffect
   useEffect(() => {
     const hash = window.location.hash
     if (hash.includes('access_token')) {
       const params = new URLSearchParams(hash.slice(1))
       const token = params.get('access_token')
       if (token) {
         localStorage.setItem('spotify_token', token)
         // 手动跳转到Dashboard的hash路由
         window.location.href = `${window.location.origin}${window.location.pathname}#/dashboard`
       }
     }
   }, [])
   

   这样Spotify返回的#access_token会先被处理，再手动设置HashRouter的路由锚点，避免覆盖冲突。

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