在 Github Pages 上部署后只有主页有效答案

【问题标题】：Only home page works after deploy on GithubPages在 Github Pages 上部署后只有主页有效
【发布时间】：2022-01-11 05:27:36
【问题描述】：

我构建并部署了我的 react 应用。 React App 只是在 Github 页面上显示起始页面。当我尝试切换页面 404 错误时出现。带有 Localhost 的应用程序完美运行。我不知道该怎么办。到目前为止没有任何帮助。我的代码如下：

package.json

{
  "name": "HotelLiveDemo",
  "homepage": "https://JakubSoldek.github.io/HotelLiveDemo/",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cra-template": "1.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-router-dom": "^6.0.2",
    "react-script-tag": "^1.1.2",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },

路由器

const Router = () => {
    return (
        <BrowserRouter basename={process.env.PUBLIC_URL}>
            <Routes>
                <Route path='/' element={<AboutUs />} />
                <Route path='/hotel' element={<Hotel />} />
                <Route path='/ContactUs' element={<ContactUs />} />
                <Route path='/RoomsPage' element={<RoomsPage />} />

            </Routes>
        </BrowserRouter>
    );
};

【问题讨论】：

标签： reactjs deployment react-router github-pages

【解决方案1】：

在部署到 Github 页面时，您应该在此处使用 HashRouter 而不是 BrowserRouter。 Github 页面不支持浏览器历史记录，因此 Github 页面会混淆从何处导航。

请参阅this article 的末尾以及“向我们的应用程序添加路由”部分here。

【讨论】：