Question

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

类似的东西：
<Link to='home' params={{myObj: obj}}> Click </Link>

与我将props从Parent传递到Child组件的方式相同。

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

另一个选项是传递网址中行的id，在详细信息组件中读取它，然后通过ID从商店请求数据。

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

Answer 1

所以我对这个问题的最后结论是我没有正确地思考它。通过Link传递我的数据似乎很自然，因此我可以在Child组件中访问它们。正如Colin Ramsay提到的state中有一些名为Link的内容，但这并非如此。只有当用户点击某些内容并将其转移到Link组件时，才能在数据通过Child时正常工作。

问题出现在用户访问url中使用的Link时，无法获取数据。

所以我的案例中的解决方案是通过ID参数中的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序列化它，然后在接收端对其进行反序列化。

Answer 6

使用react-roter-dom ver 5.1.2和es6

我首先解决了这样的问题，我将其存储在Link to object的搜索部分中，这意味着它是url的一部分并支持书签等。

< Link to={{
          pathname: `${match.url}/${dogName}`,
          search: `choosenDog=${JSON.stringify({ ...dog })}` //dog is the object to pass along
        }
        } >

然后在链接上，我们进入到这样的位置

const query = useQuery();
const dogString = query.get('choosenDog');
const dogObject  = JSON.parse(dogString);

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

6 个答案: