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

Question

我使用React和React Router构建了我的网站，并将其托管在Github Pages上。当我在不是主页的页面上刷新网站，或者使用ctrl +单击在新标签页中打开该页面时，会导致404错误。我知道这是因为Github Pages无法访问前端路由，解决方案之一是添加一个重定向回index.html的404.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

- Christine

---

这个回答解决了你的问题吗？在Github Pages中是否有一种配置可以将所有内容重定向到index.html以用于单页应用程序？ - Nick Roz

Answer 1

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

- Milos Rancic

Answer 2

我也遇到了同样的问题，浪费了很多时间来解决它。但是当我发现解决方案只是关键字时，我感到非常惊讶。所以这里是解决方案：

进入你的React项目，找到你定义路由的地方，并将BrowserRouter替换为HashRouter。

在我的情况下，我是这样定义路由的：

错误解决之前

src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

解决错误后

我用HashRouter替换BrowserRouter之后，它对我很有效，并且更改后的代码如下：

src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { HashRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <HashRouter>
        <App />
    </HashRouter>
);

- Abidullah

---

这确实解决了我的问题。谢谢。 - undefined

Answer 3

为了让它工作，我所做的就是在我的GitHub Pages部署流程中添加了一步，将index.html复制到404.html，然后让我的路由器处理其余部分。

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

- derpedy-doo

Answer 4

你可以尝试通过在 App.js 中将 Switch 替换为 HashRouter 来解决这个问题。这会改变你的 URL，但应该可以解决 Github Pages 的 404 问题。如果你需要更深入的解释，请阅读 这篇回复。

因此，你更新后的 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;

请告诉我这是否适用于您

- Yuran Pereira