条件路由到针对 JSON 数据进行验证的页面答案

【问题标题】：Conditional routing to a page validating against JSON data条件路由到针对 JSON 数据进行验证的页面
【发布时间】：2019-11-23 19:57:58
【问题描述】：

我是 React 新手，所以放轻松！我基本上是在寻找最简单的方法来“路由”到 Gatsby 中的特定页面，基于输入的一系列代码。我可以简单地使用 jQuery 来做到这一点，对一个充满代码的 .json 文件进行验证，但是我宁愿挑战自己并在 React 中做到这一点。

我想要实现的目标：

有没有人知道关于如何实现这样的事情的任何体面或类似的教程？我需要使用 React Router 还是 Gatsby 可以开箱即用地处理这个问题？抱歉听起来像个菜鸟 - 任何有关这方面的指导将不胜感激。

更新：

以下是被映射的 .json 数据示例：

[
    {
        "code": "401BE001",
        "activation": "story1"
    },
    {
        "code": "401BE002",
        "activation": "story2"
    }
]

我遇到的困难是将 JSON 对象与输入值字符串匹配。我哪里错了？

  if ({this.state.barcodeReceiptNo} === {beadCode.code}) {
      alert("It's a match!")
  } else {
      alert("Unlucky.")
  }

感谢您的帮助。

标记。

【问题讨论】：

您是否尝试过编写此代码，一个示例会很好地指导您朝着正确的方向前进。无论如何，要使其动态化，您应该将 json 文件导入到路由组件，map 所有路由，如果没有路由匹配，则处理 redirect。
@jank 我正在寻找一个起点。概念化路由器的工作原理是我苦苦挣扎的地方，但这听起来很有希望。 React 对我来说是一种不同的思维方式。
@jank 我已经按照上面的方法进行了编码。希望这能提供更多背景信息！

【解决方案1】：

Gatbsy 包含 @reach/router，因此您无需任何额外的库即可完成。

这里唯一需要注意的是，由于 Gatsby 是一个静态站点生成器，所有路径都应该预先存在（每页一个文件，在 pages 目录下，与您传递给 @ 的 path 值同名987654328@).

如果path/file 不存在，它将返回 404。

在 Gatsby 官方文档中寻找程序化路由：https://www.gatsbyjs.org/docs/gatsby-link/

【讨论】：