通过react-router中的链接传递对象

IT技术 reactjs reactjs-flux react-router
2021-03-26 06:32:46

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

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

与我propsParenttoChild组件传递的方式相同

如果不可能实现这一点,最好的方法是什么:
我有一个 React + Flux 应用程序,我用一些数据渲染了表格。我想要做的是当我单击其中一行时,它会将我带到该行的一些详细信息组件。该行包含我需要的所有数据,所以我认为如果我可以通过它会很棒Link

另一种选择是id在 url 中传递行的 ,在详细信息组件中读取它并从商店请求按 ID 的数据。

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

6个回答

所以我对这个问题的最终结论是我没有正确考虑它。通过 传递我的数据似乎很自然,Link这样我就可以在我的Child组件中访问它们正如Colin Ramsay 所提到的,在 中调用state一些东西Link但这不是实现它的方法。Link只有当用户单击某物并被带到Child组件时才传递数据,它才会正常工作

当用户访问url其中使用的时,问题就出现了Link然后就没有办法获取数据了。

因此,在我的情况下,解决方案是传递IDinLink参数,然后检查我Store是否有数据(用户通过 访问它Link),然后从Store.

或者,如果数据是不是在Store通话中action获取来自API的数据。

如果在直接访问 URL 时它不起作用,Link 中的“state”属性的正确用例是什么?
2021-05-29 06:32:46
在 react-router 3.0.0 中,Link 组件没有“params”属性。当前版本是如何完成的?
2021-06-06 06:32:46

可以通过 Link 传递对象(这不是最佳实践,但有可能)

在查询中添加数据而不是 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)
@a_m_dev 谢谢你可以扩展你所说的吗?也许根据您在文档中看到的内容发布您自己的答案将有助于未来的读者。查看这些文档reacttraining.com/react-router/web/api/NavLink
2021-05-25 06:32:46
@Ren 看到我回答的结尾 JSON.parse(this.props.comments)
2021-05-27 06:32:46
但是您需要参考 react router 官方文档以了解如何to在链接上传递 object ot prop ,这里是相同的,NavLink没有区别,您的有点偏离,但无论如何,已投票...,但是请更新你的答案以避免未来的误导......
2021-05-29 06:32:46
尝试在 this.props.location.query.title 下找到它。您将能够访问该值。
2021-06-05 06:32:46
@Pixelomo,如何在路由呈现的组件中访问查询对象?
2021-06-08 06:32:46

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

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

唯一的替代方法是将对象作为 JSON 传递,但无论哪种方式,您仍然会以存储在 URL 中的形式存储它。您可以查看 Link 的状态道具,但这不是一回事。
2021-06-20 06:32:46

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