如果没有页面nginx + react.js如何给出404错误
我使用nginx + react.js问题来处理404错误。此方法适用于try_files $uri /index.html;，但如果您转到直接URL或重新加载页面，浏览器将始终在现有页面上显示404。
目标:如果URL不存在，站点应该返回一个页面和一个404代码。这真的可能吗？
回答 3
Stack Overflow用户
发布于 2021-01-14 10:17:30
如果我理解正确的话，您是在问如何创建一个404页面，而不是解决页面刷新时的404代码错误。
这取决于您如何使用React以及哪些包。
如果您使用React作为客户端SPA，就像通常使用create-react-app一样，那么将只有一个输入: index.html。
所有的url请求都需要被重定向到这个索引文件，以避免404错误；在nginx location块中使用try_files $uri /index.html代码。
从那里，您的路由器控制并读取URL，并将其重定向到您的组件。所以你需要在React中解决这个404页面，而不是用nginx。(有手动定义React路由的方法，但我们将采用更简单的方法。)
不确定您使用的是什么路由器；react- router -dom是常用的路由器，我会给出我的答案。
NotFoundPage组件：
const NotFoundPage = () => (
<div>
<h3>
404 ERROR NOT FOUND
</h3>
</div>
);Home组件，或定义路由器路径的位置。
<Switch>
<Route exact path="/"> <Home /> </Route>
<Route path="/about"> <About /> </Route>
<Route path="/posts"> <Posts /> </Route>
<Route path="*"> <NotFoundPage /> </Route>
</Switch>如果您没有使用react- router -dom，请编辑您的问题以显示您使用的是哪个路由器。
Stack Overflow用户
发布于 2021-01-14 09:44:08
在我的项目中，我在nginx中配置了这行代码，以解决刷新页面后的404问题。
希望这对你的项目有用。
server {
...
location / {
try_files $uri /index.html
}
}Stack Overflow用户
发布于 2021-01-14 14:28:05
你可以在html页面上设置meta标签" Prerender -status-code“，然后Prerender会向爬虫返回一个404：
<meta name="prerender-status-code" content="404">你可以在React上这样做：
let meta = document.createElement("meta");
meta.setAttribute("name", "prerender-status-code");
meta.setAttribute("content", "404");
document.getElementsByTagName("head")[0].appendChild(meta);https://stackoverflow.com/questions/65712176
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号