javascript - 在 React-router Link 中将对象作为 prop 传递

Question

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

目前，我正在尝试通过 id作为路由参数并再次获取产品对象。但我想从 ProductList 发送整个产品对象至 Product .

我的路线是

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

ProductList 组件链接

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

如何将产品对象传递给 Product作为 Prop ？

下面的代码在 Typescript 中抛出错误，表示 Link 上不存在以下属性类型。

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

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

• > Pass props in Link react-router <--- this is similar to my issue, but answer doesn't work for react-router v4
• > react-router - pass props to handler component
• > React: passing in properties

Answer 1

Link 的“to”属性可以接受一个对象，所以你可以像这样传递你的 Prop :

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

然后你应该能够在 this.props.location.myCustomProps 中访问它们