在 Gatsby 中如何识别当前呈现的页面是否为 404？

Question

在 src/pages 中，我根据文档“Adding a 404 Page”设置了一个 404.js 页面。在此文件中，我调用 Layout 组件并传入 location 道具。

在我的 Layout.js 文件中，我尝试根据当前页面是否为 404 有条件地呈现某些组件。在我的测试中，位置对象不会为此呈现布尔值，例如使用浏览器进行测试 asdsada:

hash: ""
host: "localhost:8000"
hostname: "localhost"
href: "http://localhost:8000/asdsada"
key: "initial"
origin: "http://localhost:8000"
pathname: "/asdsada"
port: "8000"
protocol: "http:"
search: ""
state: null

阅读后我无法找到执行此操作的方法：

Get Target Path in Gatsby [duplicate]
How to get the current url within a React / Gatsby Class Component
Displaying The URL On a 404 Page In Gatsby

在 Gatsby 中有没有一种方法可以识别当前呈现的页面是否为 404 页面，以便我可以三元化一个组件？

Answer 1

您应该将 src/pages/404.js 中的布尔值传递给 Layout，例如：

import React from "react"
import Layout from "../components/layout"

const NotFoundPage = () => (
  <Layout is404Page={true}>
    <div>Your Content</div>
  </Layout>
)

export default NotFoundPage

在 Gatsby 中如何识别当前呈现的页面是否为 404？

In Gatsby how to identify if current page being rendered is 404?

url

path

gatsby

404-page