React/Vite部署GitHub Pages后createBrowserRouter刷新非首页404求助

问题原因 #

GitHub Pages是静态文件服务器，刷新非首页路径时，浏览器会直接请求对应路径的文件，但单页应用只有一个index.html，服务器找不到对应文件就返回404。需要通过路由配置和服务器重定向解决。

具体修复步骤 #

1. 修正React Router路由配置 #

在App.jsx中给createBrowserRouter添加basename参数，统一路由路径格式：

修改前：

const router = createBrowserRouter([
  {
    path: 'youFitness2005/',
    element: <Home />,
    errorElement: <Error />
  },
  // 其他路由...
]);

修改后：

const router = createBrowserRouter([
  {
    path: '/', // 首页改为根路径
    element: <Home />,
    errorElement: <Error />
  },
  {
    path: '/womens',
    element: <ShopCats category= "womens" />
  },
  {
    path: '/mens',
    element: <ShopCats category= "mens" />
  },
  {
    path: '/kids',
    element: <ShopCats category= "kids" />
  },
  {
    path: '/shopAll',
    element: <ShopAll />
  },
  {
    path: '/product/:productId',
    element: <Filter />
  },
  {
    path: '/cart',
    element: <Cart />
  }
], {
  basename: '/youFitness2005/' // 绑定GitHub Pages仓库名作为基础路径
});

2. 更新Navbar中的链接路径 #

将Navbar.jsx中带仓库名的绝对路径改为相对根路径：

修改前：

<Link to="/youFitness2005"><img className="nav-icons logo-image" src={logo}/></Link>
<Link to="/youFitness2005" className='a'><li className="nav-icons">Home</li></Link>

修改后：

<Link to="/"><img className="nav-icons logo-image" src={logo}/></Link>
<Link to="/" className='a'><li className="nav-icons">Home</li></Link>

其他链接（如/womens、/mens等）保持不变，basename会自动拼接在路径前。

3. 添加服务器重定向配置 #

在项目public目录下创建_redirects文件，内容如下：

/* /index.html 200

该文件会让GitHub Pages将所有路径请求重定向到index.html，确保React Router能接管路由处理。

4. 重新部署项目 #

执行部署命令：

npm run deploy

完成以上步骤后，非首页路径刷新即可正常加载。

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