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

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 Type 上不存在以下属性。

<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”属性可以接受一个对象，因此您可以像这样传递您的道具：

<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 路由应该与 store 相连。 希望这会有所帮助。

Answer 3

你可以尝试像Pass object through Link in react router那样通过查询参数来实现，相当难看。

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