如何在使用 Shopify CLI、React 和 Shopify App Bridge 构建的 Shopify 应用中使用路线

Question

我在应用程序中使用路由时遇到问题，它是使用 Shopify CLI、React 和 Shopify App Bridge 构建的模板，由 this documentation here 指导。

我触发的每条路由都会发送到我的项目中的 _app.js 文件，因为我可以在控制台中记录大部分输出，但我无法让它在我的应用程序中实际包含子页面的路径，例如 @987654322 @ 不会导航到 custompage，而是一个错误处理程序，并且 custompage 会包含在查询中。 props 的 route 和 pathname 字段返回

{ 
  ...
  router: "_error",
  pathname: "_error ",
  ...
}

而不是

{ 
  ...
  router: "custompage",
  pathname: "custompage",
  ...
}

我预计上述结果会是结果，但事实并非如此。但是 custompage url 确实出现在 asPath 字段中，例如 asPath: "/custompage?hmac={hmac}&host={host}&shop={shop}" 假装 {} 中的所有内容都有实际信息。

查询字段获取它需要的字段，就像它在工作页面上所做的那样。所以主要问题只是路由。

考虑到这一点，我得出的结论是，我可能遇到了问题并触发了服务器端路由处理程序，但我不知道从哪里开始重定向到确切的页面而不是样板代码附带的索引页面。我查看了他们的文档，但他们跳过了用他们的样板代码实际解释处理路由所需的大部分部分。我不想编辑主要功能，因为我担心它们可能会阻止整个应用程序运行，但我需要能够处理应用程序上的路由，而不会在尝试路由到子页面时收到 An unexpected error has occurred. 错误。甚至我的应用中对白名单网址的扩展也会触发该错误，因此我认为我需要帮助来添加到应用或服务器的路由。

谁能帮我弄清楚我错过了什么？

Answer 1

我还是 Shopify 的新手，但我可以说使用 Shopify 是一场噩梦。

我不确定这是否是最终解决方案，但目前可行：确保您尝试路由的所有文件与您的路径具有相同的命名。 如果你要路由到 https://{appURL}/subpath ，那么你的 JS 文件应该是 subpath.js 。如果文件与我的 _app.js 位于同一文件夹中，我目前只能使其工作。如果我将文件从 ./subpath 移动到 /dir/subpath ，那么我需要在我的 Shopify 应用设置中将扩展名更改为 https://{appURL}/dir/subpath 。它似乎是相对于 _app.js 文件的位置进行操作的，因此请记住这一点。

如果您使用 Shopify CLI 和 shopify node create 创建您的应用程序，那么这可以帮助您解决路由 400 问题。