在 Gatsby 的 404 页面上显示 URL

【问题标题】：Displaying The URL On a 404 Page In Gatsby在 Gatsby 的 404 页面上显示 URL
【发布时间】：2018-10-10 20:31:08
【问题描述】：

Gatsby 可以轻松创建您自己的自定义 404 页面docs here，但我想在消息内的页面上显示 URL - 类似于：

“/example/nope”处没有页面。

有什么方法可以从 404 页面中访问失败的 URL？

虽然我找不到任何与之相关的文档，但似乎 404 页面接收了一个 history 对象作为它的道具之一，但是这个对象实际上并不包含任何历史 URL，只有一个用于导航的 api到之前的状态和当前的 url（即/404）。

【问题讨论】：

标签： javascript url http-status-code-404 gatsby

【解决方案1】：

我查看了 Gatsby 如何为自己的开发 404 页面处理它，这里是来自 `gatsby/dist/internal-plugins/dev-404-page/raw_dev 的相关行：

 render() {
    const pathname = this.props.location.pathname
    ...
    return (
      ...
        <p>
          {`There's not a page yet at `}
          <code>{pathname}</code>
        </p>
     )
   }

所以它使用了props对象的location.pathname，它不是指当前404页面的url，而是导致404的页面的url。

注意：如果您访问 /404 以查看您自己的 404 页面正在开发中，这将不起作用，因为没有生成 404 以响应丢失的页面，因此 location.pathname 将是 /404

【讨论】：