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

Question

I'm getting the list of products in ProductList , in which, I need to pass the selected product object to 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 .

My Route is

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

ProductList component Link

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

How to pass product object to Product as a prop?

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.

• 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

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>

Then you should be able to access them in this.props.location.myCustomProps

Answer 2

I would suggest using redux for retrieving the data. When you navigate to product route you can get the product details by dispatching some action.

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

The product route should be connected with the the store. Hope this helps.

Answer 3

You can try to do it through query params as in Pass object through Link in react router , which is quite ugly.

Also you can try to replace Link with some other element, eg button and in click listener do location change via browserHistory.push({ pathname:"/product/" + this.props.product.Id, state: this.props.product}) and and product as state property.