Github 頁面 HashRouter 不顯示組件

Question

我在 github 頁面上的反應應用程序沒有使用 HashRouter 渲染組件，“/”上的空白頁面和“/about”上的 404 錯誤。 這是我的 app.js

function App() {
  return (
    <div className="Container-fluid" id="div2">
      <HashRouter basename="/Landing-Page">
        <Header />

        <Routes>
          <Route path="/thankyou" element={<ThankYou />} />
          <Route
            exact
            path="/"
            element={
              <div className="Container">
                <SignUp validate={validate} />
                <EbookInfo />
              </div>
            }
          />
          <Route path="/about" element={<About />} />
        </Routes>
      </HashRouter>
    </div>
  );
}

在主頁上它按預期顯示.../Landing-Page/但在其他頁面上顯示.../about而不是.../Landing-Page/about 。 我有 gh-pages 設置。 my github page https://alexhmar.github.io/Landing-Page/ my repo https://github.com/alexhmar/Landing-Page/tree/master

我也用<Router basename={process.env.PUBLIC_URL}試過這個，但這是同樣的問題。

Answer 1

當使用 Github Pages 和 React Router Dom 時，您需要使用Hash Router 。

通過import { HashRouter as Router } from "react-router-dom"; 它應該可以工作。

Github Pages isn't configured for single page applications, if you try to access /bar, it will try to find a bar.html file and thus give you a 404. By using the hash router, when you navigate to links it will go到/#bar所以 Github 頁面不會重定向你，React Router Dom 會看到它導航到 /bar 就像你期望的那樣，只要你使用Link 組件或鈎子。

Answer 2

我部署在 Heroku 而不是 Github 頁面上，現在它工作正常。