在 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屋！