通过反应路由器中的链路传递对象

Question

是否可以通过react-router中的Link组件传递对象？

就像是： <Link to='home' params={{myObj: obj}}> Click </Link>

就像我将props从Parent传递给Child组件一样。

如果不可能，实现这一目标的最佳方式是什么： 我有一个React + Flux应用程序，我用一些数据渲染表。我想要做的是当我点击其中一行时，它将带我到这一行的一些细节组件。该行包含我需要的所有数据，所以我认为如果我能通过Link传递它会很棒。

另一种选择是传递url中行的id，在details组件中读取它，并通过ID从store中请求数据。

不确定实现上述目标的最佳方法是什么......

Answer 1

所以我对这个问题的最终结论是我没有正确地思考它。通过Link传递我的数据似乎很自然，所以我可以在我的Child组件中访问它们。正如Colin Ramsay所提到的那样，在state中有一种叫做Link的东西，但这不是那种做法。只有当用户点击某些内容并将其带到Link组件时，才能通过Child传递数据。

当用户访问url中使用的Link然后无法获取数据时，问题就出现了。

所以在我的案例中的解决方案是通过ID params中的Link然后检查我的Store是否有数据（用户通过Link访问它）然后从Store获取这些数据。

或者如果数据不在Store中，则调用action从API获取数据。

Answer 2

不，你不能在params中传递一个对象，所以我同意你的看法，你最好的计划是将id传递给商店，让商店发出CHANGE事件，并让组件查询商店以获取信息。

Answer 3

可以通过链接传递对象。在查询中添加数据而不是params并对对象进行字符串化：

<Link to={{ 
  pathname: `/blog/${post.id}`, 
  query: {
    title: post.title, 
    content: post.content,
    comments: JSON.stringify(post.comments)
  } 
}}>Read More...</Link>

然后在您的子组件中将字符串解析回一个对象：

JSON.parse(this.props.comments)

Answer 4

这是不可能的，您需要传递可以存储在URL中的内容，例如字符串ID。然后，您将使用该ID执行对象的查找。

Answer 5

您可以尝试JSON序列化它，然后在接收端反序列化它。