在React-router Link中将对象作为道具传递

Question

我要获取其中的产品列表ProductList，其中需要将选定的产品对象传递给Product。

目前，我正在尝试将idas作为路由参数传递，并再次获取product对象。但我想将整个产品对象从发送ProductList到Product。

我的路线是

<Route path={joinPath(["/product", ":id?"])} component={Product} />

ProductList组件链接

<Link to={"/product/" + this.props.product.Id} >{this.props.product.Name} </Link>

如何传递产品对象Product作为道具？

下面的代码在Typescript中引发错误，表示LinkType 上不存在以下属性。

<Link to={"/product/" + this.props.product.Id} params={product}>{Name}</Link>

我尝试了以下问题，但似乎没有问题。

• 在Link react-router中传递道具 <--- this is similar to my issue, but answer doesn't work for react-router v4
• react-router-将道具传递给处理程序组件
• 反应：传递属性

Answer 1

的“ to”属性Link可以接受一个对象，因此您可以像这样传递道具：

<Link to={
    { 
        pathname: "/product/" + this.props.product.Id,
        myCustomProps: product
    }
}>
    {Name}
</Link>

然后，您应该可以访问它们 this.props.location.myCustomProps