如何在github页面上使用React router？

Question

我第一次设置一个反应路由器，然后我将它推送到 gh-pages。当我只路由联系页面时它起作用了。当我添加更多页面时，它不再起作用了。它确实在我的本地主机中工作。我的 index.js 看起来像这样：

import React from "react"
import ReactDOM from "react-dom/client"
import {App} from "./App"
import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    </React.StrictMode>
)

我的 App.js 看起来像这样：

import { Route, Routes } from "react-router-dom"

import Home from "./pages/home";
import Contact from "./pages/contact";
import Nieuws from "./pages/nieuws";
import Openingstijden from "./pages/openingstijden";
import Producten from "./pages/producten";
import Prijzen from "./pages/prijzen";

export function App() {
    return (
        <Routes>
            <Route path="/KapsalonDeTussenstop/" element={<Home />} />
            <Route path="/KapsalonDeTussenstop/contact" element={<Contact />} />
            <Route path="/KapsalonDeTussenstop/nieuws" element={<Nieuws />} />
            <Route path="/KapsalonDeTussenstop/openingstijden" element={<Openingstijden />} />
            <Route path="/KapsalonDeTussenstop/prijzen" element={<Prijzen />} />
            <Route path="/KapsalonDeTussenstop/producten" element={<Producten />} />
        </Routes>
    )
}

我的主页可以正常工作（见图），所以我认为我的 gh 页面很好。 我需要做什么来解决这个问题？

我尝试按照说明进行操作，并尝试进行有效的路由，但之后就不再有效了。我也尝试过 hashrouter 但它也无法在本地主机上工作。