将应用程序部署到 GitHub 后刷新页面时，React createBrowserRouter 路径不起作用

Question

我制作了一个 React/Vite 健身网站，并使用 createBrowserRouter 创建所有路径，一切都工作得很好，直到我将网站部署到 GitHub 页面。出现问题：

每次我在非主页的路径上刷新页面时，浏览器都会将我重定向到来自 GitHub 的错误消息，说没有这样的文件：

404 这里没有 GitHub Pages 网站。

https://shlcomp.github.io/youFitness2005/

这是我的代码。

App.jsx：

import './App.css';
import Home from './pages/home/Home.jsx';
import { createBrowserRouter } from 'react-router-dom';
import { RouterProvider } from 'react-router-dom';
import ShopAll from './pages/shopAll/ShopAll.jsx';
import ShopCats from './pages/shopCats/ShopCats.jsx';
import Filter from './components/filter/Filter.jsx';
import Error from './components/error/Error.jsx';
import Cart from './pages/cart/Cart.jsx';
import Provider from './context/Context.jsx';



const router = createBrowserRouter([
  {
    path: 'youFitness2005/',
    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 /> //will display the productDisplay, filtered by id
  },
  {
    path: '/cart',
    element: <Cart />
  }
]);
function App() {
  return (
    <>
    <Provider basename={"youFitness2005/"}>
    <RouterProvider router={router} />
    </Provider>
    </>
  )
};

export default App;

这是主页页面：

import Footer from "../../components/footer/Footer"
import Hero from "../../components/hero/Hero"
import Insp from "../../components/insp/Insp"
import Mazaya from "../../components/mazaya/Mazaya"
import Navbar from "../../components/navbar/Navbar"

const Home = () => {
  return (
    <div>
      <Navbar />  
      <Hero />
      <Insp />
      <Mazaya />
      <Footer />
    </div>
  )
}

export default Home

这是 Navbar.jsx 页面：

import './Navbar.scss';
import logo from '../../assets/logo.png';
import { Link } from 'react-router-dom';
import { useContext, useState, useEffect } from 'react';
import { myContext } from '../../context/Context.jsx';

const Navbar = () => {
  const {openBurg} = useContext(myContext);
  //for a dynamic cartCount
  const {basket} = useContext(myContext); 
  //I was stupidly stuck with an error just cuz i imported basket with [] not {} :)
  const [cartCount, setCartCount] = useState(0);
  //updating the cartCount dynamically
  useEffect(()=>{
    const count = basket.map((item)=> item.quantity).reduce((x, y)=> x+y, 0);
    setCartCount(count);
  }, [basket]); //recalculate the basket updates


  return (
    <div>
      <section className="header">
        <nav className="navbar">
            <ul>






              //here are the paths: 



              <div className="main-navs">
                {/* make sure to link the home page to "/home-url" not "home-url/" */}
                <Link to="/youFitness2005"><img className="nav-icons logo-image" src={logo}/></Link>
                <i id='burg' className="fa-solid fa-bars" onClick={()=>openBurg()}></i>
              </div>
                <Link to="/youFitness2005" className='a'><li className="nav-icons">Home</li></Link>
                <Link to="/womens" className='a'><li className="nav-icons">Women&apos;s</li></Link>
                <Link to="/mens" className='a'><li className="nav-icons">Men&apos;s</li></Link>
                <Link to="/kids" className='a'><li className="nav-icons">Kid&apos;s</li></Link>
                <Link to="/shopAll" className='a'><li className="nav-icons">All Categories</li></Link>
                <Link to="/contact" className='a'><li className="nav-icons">Contact Us</li></Link>
                <Link to="/about" className='a'><li className="nav-icons">About Us</li></Link>
            </ul>
            
            
          
        <div className="other-uls">
        <ul>
            <li className="link"><i className="fa-solid fa-magnifying-glass"></i></li>
            <Link to="/cart" className='a'><li className="link"  ><i id="cartCount" className="fa-sharp fa-solid fa-bag-shopping">({cartCount})</i></li></Link>
          
        </ul>
        </div>
        </nav>

        
    </section>
    </div>
  )
}

export default Navbar

这里还有一些其他文件（我不确定它们是否重要）， Package.json:

{
  "homepage": "https://SHLcomp.github.io/youFitness2005/",
  "name": "fitness",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.27.0",
    "sass": "^1.80.5"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.3",
    "eslint": "^9.13.0",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "gh-pages": "^6.2.0",
    "globals": "^15.11.0",
    "vite": "^5.4.10"
  }
}

vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "/youFitness2005/"
})

请帮我解决这个问题。

谢谢你。

Answer 1

当使用react-router创建单页应用程序（SPA）时，您通常必须对服务器进行更改以使其正确提供文件。否则，服务器将尝试使用与您的字面子路由地址匹配的文件而不是主索引文件进行响应。因此是 404。

Github 页面对于 SPA 页面应用程序的配置有点限制，但看起来有些人已经找到了一些解决方法，包括修改 404 模板文件。

设置应用程序时，请参阅此页面以获取一些示例配置：找不到页面 - React/vite 应用程序未在 github 页面上正确路由

您还可以参考此存储库作为示例 SPA：https://github.com/rafgraph/spa-github-pages