当在“生产”中的浏览器中直接访问url时，GatsbyJs客户端的唯一路径会转到404页面

Question

我创建了一个Gatsby应用程序，并配置gatsby-node.js为仅创建客户端路径，这些路径在开发中都可以正常工作，同时直接访问路径的url，但在生产环境中则不能。

例如：

if(page.path.match(/^\/sample/)){
     page.matchPath = "/sample/:value1/:value2/:value3";
     createPage(page)
  }

我正在heroku用来部署应用程序

Answer 1

为什么

尽管客户端路由器知道此路径，但没有相应的HTML文件。当浏览器查看站点时，它首先加载404.html由gatsby生成的文件，该文件包括客户端路由器。路由器完成初始化后，将读取路径并加载正确的页面。意味着您最终到达了正确的位置，但到达错误页面的时间只有半秒钟。

如何修复

通用解决方案是告诉服务器将/sample/路径重定向到/sample/index.html文件。进行此操作的方式取决于您的主机，但是我将为各种主机提供该技术的名称，以防您需要查找它。通常称为URL重写，每个主要的托管平台都应支持它。

Heroku

gatsby部署文档的Heroku部分建议使用heroku-buildpack-static模块，该模块内置了对“自定义路由”的支持，它将使用以下语法为您的情况解决此问题：

{
  "routes": {
    "/sample/**": "sample/index.html",
  }
}

AWS放大

您需要在AWS Amplify控制台中添加重定向。对于此示例，参数为：