http://USER.github.io/PROJECT_NAME/
可以工作,但是 http://USER.github.io/PROJECT_NAME/about
不行,因为没有重定向或重写。 index.html 位于项目的根目录。http://USER.github.io/PROJECT_NAME/
可以工作,但是 http://USER.github.io/PROJECT_NAME/about
不行,因为没有重定向或重写。 index.html 位于项目的根目录。当用户访问您的页面时,例如 https://successtar.github.io/teamwork/,GitHub 将提供您的 index.html 页面,而如果用户尝试访问 https://successtar.github.io/teamwork/foo,由于不存在,GitHub 将提供 404.html 页面,其内容与 index.html 相同,这样您就可以如预期地使 React 应用程序正常工作。
这里是示例的源代码:https://github.com/successtar/teamwork/tree/gh-pages
更新
您可以自动化这个过程,每次运行 npm run build
自动生成 404.html 文件。
第一步:安装 shx 以进行跨平台命令,如下所示:npm install shx --save-dev
第二步:转到 package.json,在脚本块中将 "build": "react-scripts build"
替换为 "build": "react-scripts build && shx cp build/index.html build/404.html"
就是这样。
无论何时运行npm run build
,都会自动生成404.html文件。mv index.html 404.html
。非常好用,谢谢。 - Joseph Garroneindex.html
复制到 404.html
是唯一与 NGINX 或 Apache 重定向单页面应用程序的真实行为相匹配的解决方案。其他解决方案不允许重新加载页面并正确触发 React 应用程序的 BrowserRouter
,因为它们只会重定向到主页。 - Amin NAIRI404.html
页面,每当出现404错误时都会显示该页面。如果http://USER.github.io/PROJECT_NAME/about
不存在,则会显示您的404.html
内容,并将“未找到”的URL作为window.location
。PROJECT_NAME/#/about
这样的路由,并自动推送到PROJECT_NAME/about
。https://github.com/websemantics/gh-pages-spa
如果你在404.html
和index.html
页面中包含该软件包,它将重定向所有流量到Index.html
页面。对我来说,我一直欣赏最简单的解决方案。
只需添加一个文件,404.html
全部内容:
<script>
window.location.href = "/";
</script>
就是这样!希望能有所帮助!
当页面未找到时,会提供404页面来通知用户。如果存在404.html文件,则会提供该文件而不是默认页面。
我们可以利用这一点,在项目的根目录(即index.html所在位置)创建一个404.html文件,并添加一个重定向到index.html的meta标签。只需将“https://example.com”替换为您的域名。
我尝试过这种方法,希望对您也有帮助!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="refresh" content="0; URL='https://example.com'" />
<title>404 - redirect</title>
</head>
<body></body>
</html>
好的,有一个简单的解决办法。
在您的GitHub页面存储库的根目录中创建一个名为404.html
的文件。
该文件的内容应为:
<!DOCTYPE html>
<html lang="en" id="htmlbody">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading...</title>
</head>
<body>
<script>
var doc = document.getElementById('htmlbody');
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
doc.innerHTML = this.responseText;
doc.removeAttribute("id");
}
if (this.status == 404) doc.innerHTML = "Page not found.";
}
}
xhttp.open("GET", "index.html", true);
xhttp.send();
</script>
</body>
</html>
document.body
,因为我考虑更新整个文档,但如果它不起作用,请将doc变量更改为document.body
。
package.json
中的一行中完成,而无需添加依赖项。
(package.json
)
{
.
.
.
"scripts": {
"postbuild": "cp ./build/index.html ./build/404.html'",
.
.
.
}
}
npm run build
(就像在部署过程中一样),postbuild
脚本将被触发。/some_route
也将被发送到你的SPA应用程序中。创建了两个文件404.md和404.html
--- permalink: /404.html ---
这解决了我在 Angular 应用程序中遇到的问题。
index.html
和404.html
文件中: // if it's on index.html
if (window.sessionStorage.path) {
let path = window.sessionStorage.path; // gets the path saved on sessionStorage
window.history.pushState(null, null, path); // push it on url
window.sessionStorage.removeItem('path'); // removes from session
} else { // if it's on 404.html (path doens't exist)
let path = window.location.pathname; // get the path url
window.sessionStorage.path = path; // saves on sessionStorage
window.location.href = '/'; // go to index
}
抱歉回复晚了。
GitHub将查找404.html文件;如果未找到,则GitHub将显示其默认页面。
因此,您可以创建一个404.html文件,将用户重定向到index.html文件。
为此,您需要使用原始的Javascript;请参见下面的示例。
404.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page not found</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script>
const urlToRedirect = 'https://rajgohil07.github.io/todo-app-redux/'
window.location = urlToRedirect;
</script>
</body>
</html>
您可以将您的项目链接传递给urlToRedirect变量。