如何解决GitHub页面上的SPA React Router应用刷新时出现404错误
我使用React和React Router构建了我的网站,该网站托管在Github Pages上。当我在不是主页的页面上刷新站点时,或者按ctrl键并单击以在新选项卡中打开页面时,会导致404错误。我知道这是因为Github页面无法访问前端路由,一种解决方案是添加一个404.html文件,该文件会重定向回您的index.html。
我尝试按照两者上的说明进行操作
但都没有为我工作。我想我缺少了一些东西,但是由于我对React Router并不熟悉,所以我无法弄清楚出了什么问题。有人可以帮忙吗? (注意:我知道一个解决方案是使用HashRouter,但我不希望自己的网址看起来很丑)
我的代码可以在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文件。
希望对您有帮助
您可以尝试解决此问题的一种方法是在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;
让我知道这是否对您有用
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。