在 React-router Link 中将对象作为道具传递 [英] Passing an object as prop in React-router Link
问题描述
我正在获取ProductList
中的产品列表,其中,我需要将选定的产品对象传递给Product
.
I'm getting the list of products in ProductList
, in which, I need to pass the selected product object to Product
.
目前,我正在尝试将 id
作为路由参数传递并再次获取产品对象.但我想将整个产品对象从 ProductList
发送到 Product
.
Currently, I'm trying pass the id
as a route param and get the product object again. But I want to send the entire product object from ProductList
to Product
.
我的路线是
<Route path={joinPath(["/product", ":id?"])} component={Product} />
ProductList 组件链接
ProductList component Link
<Link to={"/product/" + this.props.product.Id} >{this.props.product.Name} </Link>
如何将产品对象作为道具传递给Product
?
How to pass product object to Product
as a prop?
下面的一个在 Typescript 中抛出错误,说 Link
类型上不存在以下属性.
the below one throws error in Typescript saying the following property does not exist on Link
Type.
<Link to={"/product/" + this.props.product.Id} params={product}>{Name}</Link>
我尝试了以下问题,但似乎都没有我的问题.
I tried the following questions, but none seems to have my issues.
- 在链接 react-router 中传递道具
<--- 这与我的问题类似,但答案不适用于 react-router v4
- react-router - 将 props 传递给处理程序组件立>
- React:传入属性
推荐答案
Link
的 "to
" 属性可以接受一个对象,这样你就可以像这样传递你的道具:
The "to
" property of Link
can accept an object so you can pass your props like this :
<Link to={
{
pathname: "/product/" + this.props.product.Id,
myCustomProps: product
}
}>
{Name}
</Link>
然后你应该可以在this.props.location.myCustomProps
这篇关于在 React-router Link 中将对象作为道具传递的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!