如何在Gatsby的404页面中显示访问失败的URL？

当然可以实现这个需求！你提到的history对象确实没有直接提供当前的错误路径，但有两种简单可靠的方式能获取到它：

方法1：直接使用window.location.pathname #

这是最直接的方式，通过浏览器的window对象就能拿到当前访问的路径。不过要注意Gatsby在静态构建阶段是运行在Node.js环境下，此时window对象不存在，所以需要加个判断避免构建报错：

import React from "react"

const NotFoundPage = () => {
  // 仅在客户端环境下获取路径，避免构建时出错
  const failedPath = typeof window !== 'undefined' ? window.location.pathname : ''

  return (
    <div className="not-found-container">
      <h1>哦，页面走丢了！</h1>
      <p>未找到路径为`{failedPath}`的页面</p>
    </div>
  )
}

export default NotFoundPage

方法2：使用@reach/router的useLocation Hook #

Gatsby底层基于@reach/router，所以可以直接用它提供的useLocation Hook来获取当前路由信息。这种方式更贴合React组件的写法，也不用手动处理window的兼容性问题：

import React from "react"
import { useLocation } from "@reach/router"

const NotFoundPage = () => {
  const location = useLocation()

  return (
    <div className="not-found-container">
      <h1>页面未找到</h1>
      <p>未找到路径为`{location.pathname}`的页面</p>
    </div>
  )
}

export default NotFoundPage

小提示 #

• 静态构建时，Gatsby生成的404页面不会包含具体路径（毕竟构建时没法预知用户会访问哪些不存在的路径），但当用户在客户端导航到错误路径时，组件会在浏览器中实时渲染，此时就能正确获取到当前的失败URL。
• 如果你的项目用了类组件，也可以通过组件的props.location来获取路径，效果和useLocation一致。

内容的提问来源于stack exchange，提问作者Undistraction