时间戳

首页 > 解决方案 > 条件路由到针对 JSON 数据进行验证的页面

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

问题描述

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

我想要实现的目标：

  1. 用户到达带有文本输入和按钮的空白页面。
  2. 用户输入代码。
  3. 应用程序从 .json 文件中的代码列表中检查代码。
  4. 应用程序路由并显示与输入的代码对应的页面。

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

更新：

我有一个真正的准系统应用程序并且运行良好： https ://gist.github.com/cruelmelody/fc5a1eb6d34118b76d7c273c813a0ec2

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

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

我卡住的地方是将 JSON 对象与输入值字符串匹配。我哪里错了？

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

谢谢你的帮助。

标记。

标签： jsonreactjsreact-routergatsby

解决方案

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

  1. 在部分下创建一个文件pages，您的用户将在第一次加载时登陆。
  2. import { navigate } from 'gatsby'
  3. 设置一个表单来收集用户输入。
  4. 导入带有代码和路径的 JSON 文件。
  5. 比较您的 JSON 文件和您的用户输入，然后() => navigate(path)单击按钮。

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

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

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

推荐阅读