如果没有页面nginx + react.js如何给出404错误答案

【问题标题】：How to give a 404 error if there is no page nginx + react.js如果没有页面nginx + react.js如何给出404错误
【发布时间】：2021-04-19 01:41:45
【问题描述】：

我使用 nginx + react.js 处理 404 错误的问题。此方法有效try_files $uri /index.html; 但是如果你去直接 URL 或者重新加载页面，浏览器总是会在现有页面上显示 404

目标：如果 URL 不存在，该站点应返回一个页面和一个 404 代码。这真的可能吗？

【问题讨论】：

当你在$和uri之间放置空格时，$和uri之间不应该有空格，它不会被nginx视为变量

标签： reactjs http nginx http-status-code-404

【解决方案1】：

如果我理解正确，您问的是如何创建 404 页面，而不是解决页面刷新时的 404 代码错误。

这取决于你如何使用 React 以及哪些包。

如果您使用 React 作为客户端 SPA，就像通常使用 create-react-app 一样，将只有一个输入； index.html。

您的所有 url 请求都需要重定向到此索引文件以避免 404 错误；在带有try_files $uri /index.html 代码的 nginx 位置块内。

您的路由器从那里控制并读取 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，请编辑您的问题以显示您使用的是哪个路由器。

【讨论】：

没错！我们正在使用 SPA 和 react-router-dom。原来404页码不能传给SPA？我们的搜索引擎将 URL 中不存在的参数编入索引，并将它们显示为新页面。示例：我们现在有 -site.ru/catalog/item_12345 参数 = 200 代码。应该 - site.ru/catalog/item_12345 参数 = 404 代码
您可以使用像 github.com/daviddt/react-http-status-code 或 github.com/vgno/react-server-status 这样的包。这2个看起来有点过时，但你可以搜索。在 react-router-dom 上，它说添加 status={404} 到路由会起作用。但不确定这个。 <Route path="*" status={404}> <NotFoundPage /> </Route> 最后，您可以使用“react-helmet”之类的包来创建 prerender-status-code 元标记。这 3 种方法中的一种有望解决您的问题。

【解决方案2】：

在我的项目中，我在nginx中配置了这行代码来解决刷新页面后的404问题。

希望这适用于您的项目。

server {
  ...
  location / {
    try_files $uri /index.html
  }
}

【讨论】：

我已经配置了这个方法，谢谢！如果没有页面，我需要项目发出 404 代码。使用您的方法，它不会发出问题，而只是返回带有代码 200 的页面

【解决方案3】：

您可以在html页面上设置元标记“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);

【讨论】：