链接到同一域上的非 gatsby html 页面，而 Gatsby 不会重定向到 404答案

【问题标题】：Link to a non-gatsby html page on same domain without Gatsby redirecting to 404链接到同一域上的非 gatsby html 页面，而 Gatsby 不会重定向到 404
【发布时间】：2019-11-01 21:40:14
【问题描述】：

我有一个 Gatsby 博客。我正在为 create-react-app 中的编码游戏编写一组教程文章。在我的 Gatsby 帖子降价中，我试图链接到托管在同一服务器上的那个帖子的演示反应应用程序的构建版本，但 Gatsby 一直给我一个 404 页面。

我正在使用 nginx。由gatsby build 生成的公用文件夹的所有内容都位于我的网络服务器的var/www/html 目录中。

create-react-app 构建位于 var/www/html/tutorials/01/ 内，并有自己的 index.html 文件。

在我的 Markdown 中，我尝试了这两种格式的链接：view the code [here](/tutorials/01/) 和 view the code [here](//165.227.94.249/tutorials/01/)。

如果您在浏览器中查看帖子，网址为 //165.227.94.249/posts/tutorial-01 并单击链接，它将带您到 //165.227.94.249/tutorials/01/ 但会显示404 页面。但是，如果您在相同的 URL 刷新浏览器，将提供工作的 react 应用程序。

如何防止 Gatsby 覆盖此请求并显示 404 页面，而不仅仅是让 Web 服务器提供该 URL 中存在的 index.html 文件？

【问题讨论】：

标签： nginx create-react-app gatsby

【解决方案1】：

您的标记中的内部链接会在您构建时自动转换为 Gatsby 链接。 Gatsby Link 仅适用于来自 Gatsby 构建的内部资源。您的 create-react-app 应用位于同一台服务器上，但在 Gatsby 构建过程之外。

来自documentation：

此组件仅适用于 Gatsby 处理的页面的链接。对于指向其他域上的页面或同一域上的页面的链接由当前 Gatsby 站点处理，使用普通元素。

我认为在包括 https 在内的标记中使用完整 URL 可能会成功：https://165.227.94.249/tutorials/01/

PS：当我尝试时，我从您的服务器收到了连接超时。

【讨论】：

【解决方案2】：

您应该尝试禁用gatsby-plugin-catch-links。如果这不起作用，请尝试捕获 onClick 事件，取消该事件并触发您自己的重定向。

function processExternalSameDomainLink(event) {
  window.location.href = url

  event.stopPropagation()
  event.preventDefault()
  return false
}

<a href={newTo} onClick={processExternalSameDomainLink}>

【讨论】：