React.js HATEOAS 客户端答案

【问题标题】：React.js HATEOAS clientReact.js HATEOAS 客户端
【发布时间】：2016-10-26 20:15:00
【问题描述】：

如果我在资源 /people 上对我的 api 执行以下 http 调用并返回

{
  "_embedded": {
    "people": [
      {
        "id": 1,
        "firstName": "John",
        "lastName": "Doe",
        "_links": {
          "self": {
            "href": "http://localhost:8080/person/1"
          },
          "person": {
            "href": "http://localhost:8080/person/1"
          }
        }
      }
    ]
  },
  "_links": {
    "self": {
      "href": "http://localhost:8080/person"
    }
  }
}

数据正在屏幕上的表格中呈现，目前我从后端公开我的 ID，并使用以下链接让我的 react-router 处理

<Link to={`person/${this.props.person.id}`}>Detail</Link>

在这里，我无法在呈现的链接中传递链接，而必须传递 id 才能在我的后端进行详细调用。但是我不想手动构建href，而是想在我的下一个组件中使用_links.self.href 的url。

如何在我的 React 应用程序中不暴露 id 来实现这一点？

【问题讨论】：

I can't pass it as a parameter since it's a link 你能扩展一下吗？另外，你是怎么路由的？反应路由器？
你说得对，不清楚，现在好些了吗？
更清楚了，谢谢。但是<Link to={${this.props.person._links.self.href}}>Detail</Link> 不会做你想做的事吗？我假设 person 是您 API 响应中该数组的结构。
不，json是从我的api返回的，href中的值是我后端的位置。

标签： javascript reactjs hateoas

【解决方案1】：

发现了一个相同问题的问题here。

在链接中使用：

<Link to={{pathname: "/person", state: { person: person }}} />

并且在引用的组件中：

this.props.location.state.person

【讨论】：

【解决方案2】：

您的问题与我在回答此问题时给出的示例几乎相同：https://stackoverflow.com/a/18083285/760706

我认为您所介绍的主要问题是您包含在_embedded 部分 (/person/1) 中的资源未包含在集合资源的链接中，即主要的 _links 部分。相反，您在此人自己的链接中将其列在 self 旁边。

我看到的第二个问题是，您使用的链接关系“人”（实际上链接到个人）既不是 URI，也不是 IANA 注册的链接关系列表。这是仅有的两种合法的链接关系类型。在这种情况下，您的集合应使用已注册的关系 item 指向其成员。对于自定义关系，您的 URI 应该是您控制的域下的 HTTP URL，指向文档，以便用户可以通过转到该 URL 来查找该链接关系的文档。

【讨论】：