在 GitHub Pages 中使用 SPA React Router 应用程序刷新时出现 404 错误

Question

我使用 React 和 React Router 构建了我的网站，它托管在 Github Pages 上。当我在不是我的主页的页面上刷新站点或执行 ctrl+单击以在新选项卡中打开页面时，会导致 404 错误。我知道这是因为 Github 页面无法访问前端路由，一种解决方案是添加一个 404.html 文件，该文件重定向回您的 index.html。

我尝试按照两者的说明进行操作

1. https://github.com/websemantics/gh-pages-spa
2. https://github.com/rafgraph/spa-github-pages

但都不适合我。我想我遗漏了一些东西，但我不知道出了什么问题，因为我对 React Router 不太熟悉。任何人都可以帮忙吗？ （注意：我知道一个解决方案是使用 HashRouter，但我不希望我的 URL 看起来很难看）

我的代码可以在GitHub上查看：https://github.com/christinexlin/portfolio

Answer 1

我花了很长时间来解决这个问题。问题是 GitHub Pages 不支持单页应用，所以在刷新页面时会出现 404 错误。
查看https://github.com/rafgraph/spa-github-pages 并按照说明进行操作，这非常简单。我已遵循“基本说明”，但请查看“详细说明”中的第 5 步，这有助于我完全修复它（将 repo 名称添加到 index.html 中资产的绝对路径并将 segmentCount 设置为 1）。
看看我的代码https://github.com/milosrancic/reactjs-website。我没用过HashRouter，我用过Switch。而且我还添加了 404.html 文件。
希望对你有帮助

Answer 2

您可以尝试解决此问题的一种方法是在 App.js 中将 Switch 替换为 HashRouter 。这将更改您的 URL，但它应该可以解决您的 github 页面的 404 问题。如果您需要更深入地解释为什么会发生这种情况read this reply。

所以你更新后的App.js 应该是这样的：

import React, { Component } from "react";
import { HashRouter, Route } from "react-router-dom";
import Emoji from "react-emoji-render";
import "./App.css";
//Pages
import Projects from "./Projects.js";
import About from "./About.js";
import Critterpedia from "./Critterpedia.js";
import Bluenotes from "./Bluenotes.js";
import Formally from "./Formally.js";
//Components
import visualize from "./Images/visualize-actualize.png";
import ScrollToTop from "./ScrollToTop.js";

class App extends Component {
  render() {
    return (
      <div>
        <ScrollToTop />
        <HashRouter>
          <Route exact path="/" component={Projects} />
          <Route path="/about" component={About} />
          <Route path="/critterpedia" component={Critterpedia} />
          <Route path="/bluenotes" component={Bluenotes} />
          <Route path="/formally" component={Formally} />
        </HashRouter>

        <div className="footer">
          <div className="emoji">
            <Emoji text="?" />
          </div>

          <div className="intro-icon">
            <div className="img-div">
              <img src={visualize} alt="visualize and actualize" />
            </div>
          </div>

          <div className="credit">
            <div className="footer-links">
              <a href="https://github.com/christinexlin">GitHub</a>
              <a href="https://www.linkedin.com/in/christine-lin-01/">
                LinkedIn
              </a>
              <a href="https://twitter.com/christinexlin">Twitter</a>
            </div>
            <p>
              Made with <Emoji text="?" />
              by Christine Lin
            </p>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

让我知道这是否适合你

Answer 3

为了让它工作，我所做的只是在我的 GitHub Pages 部署管道中添加一个步骤，将 index.html 复制到 404.html，然后让我的路由器处理剩下的事情。

请注意，这仍会导致路由返回 404 状态，因此 SEO 或 CLI ping 会认为请求失败。