我用 React 和 React Router 构建了我的网站，它托管在 Github Pages 上。当我在不是我的主页的页面上刷新网站或按住 ctrl+单击在新选项卡中打开页面时，会导致 404 错误。我知道这是因为 Github 页面无法访问前端路由，一种解决方案是添加一个 404.html 文件，该文件重定向回您的 index.html。
我尝试按照两者的说明进行操作
但两者都不适合我。我想我错过了一些东西，但我不知道出了什么问题，因为我对 React Router 不太熟悉。有人可以帮忙吗？ （注意：我知道一个解决方案是使用 HashRouter，但我不希望我的 URL 看起来很难看）
我的代码可以在GitHub上查看：https://github.com/christinexlin/portfolio
我花了相当长的时间来解决这个问题。问题是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 文件。
我希望这有帮助
我也有同样的问题，并浪费了很多时间来解决它，但当我发现解决方案只是关键字时，我很惊讶，所以这是解决方案：
转到您已定义路由的 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>
);
为了使其正常工作，我所做的就是向 GitHub Pages 部署管道添加一个步骤，将
index.html404.html请注意，这仍然会导致路由返回 404 状态，因此 SEO 或 CLI ping 会认为请求失败。
尝试解决此问题的一种方法是在 App.js 中将
SwitchHashRouterApp.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;
让我知道这是否适合您
1> 将“BrowserRouter”替换为“HashRouter”。 （只是你会发现你的基本路线中添加了一个额外的“#”）
2> 在公共目录中更新或创建 404.html 文件： 例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<title>Your Title</title>
<script type="text/javascript">
var segmentCount = 1;
var l = window.location;
l.replace(l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') );
</script>
</head>
<body>
</body>
</html>
我遇到了同样的问题，从 stackoverflow.com 解决了它。