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

Question

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

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

Answer 1

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

希望这对您的项目有用。

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

Answer 2

如果我没理解错的话，你问的是如何创建 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>
  );

主页组件，或您定义路由器路径的任何位置。

<Switch>
  <Route exact path="/"> <Home /> </Route>
  <Route path="/about"> <About /> </Route>
  <Route path="/posts"> <Posts /> </Route>
  <Route path="*"> <NotFoundPage /> </Route>
</Switch>

如果您没有使用 react-router-dom，请编辑您的问题以显示您使用的路由器。

Answer 3

您可以在 html 页面上设置元标记“prerender-status-code”，Prerender 将 return 向爬虫发送 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);

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

How to give a 404 error if there is no page nginx + react.js

reactjs

http

nginx

http-status-code-404