Github pages HashRouter不显示组件

Question

我在github页面上的react应用程序没有使用HashRouter呈现组件，空白页面在"/“上，404错误在"/about”上。这是我的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设置。我的github页面https://alexhmar.github.io/Landing-Page/我的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不是为单页面应用程序配置的，如果你试图访问/bar，它会试图找到一个bar.html文件，从而给你一个404。

Answer 2

我部署在Heroku上，而不是Github pages上，现在它工作得很好。