在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？

下面的一个在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

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

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

然后您应该可以在this.props.location.myCustomProps

中访问它们

Answer 2

我建议使用redux来检索数据。当您导航到产品路线时，您可以通过调度某些操作来获取product详细信息。

componentDidMount() {
    let productId = this.props.match.params.Id;
    this.props.actions.getProduct(productId);
}

product路由应与商店连接。 希望这会有所帮助。

Answer 3

您可以尝试通过Pass object through Link in react router中的查询参数来执行此操作，这非常难看。

您也可以尝试将Link替换为其他元素，例如按钮和点击监听器通过browserHistory.push({ pathname:"/product/" + this.props.product.Id, state: this.props.product})和产品state属性更改位置。