Recibo la lista de productos en ProductList, en la cual, necesito pasar el objeto de producto seleccionado a Product.

Actualmente, intento pasar el id como parámetro de ruta y obtener el objeto del producto nuevamente. Pero quiero enviar todo el objeto del producto desde ProductList a Product.

Mi ruta es

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

Enlace del componente ProductList

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

¿Cómo pasar un objeto de producto a Product como accesorio?

El siguiente arroja un error en Typecript que dice que la siguiente propiedad no existe en el tipo Link.

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

Intenté las siguientes preguntas, pero ninguna parece tener mis problemas.

6
Prajwal 23 feb. 2018 a las 16:56

3 respuestas

La mejor respuesta

La propiedad "to" de Link puede aceptar un objeto para que puedas pasar tus accesorios de esta manera:

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

Entonces deberías poder acceder a ellos en this.props.location.myCustomProps

7
Dyo 9 nov. 2019 a las 11:43

Puede intentar hacerlo a través de parámetros de consulta como en Pase el objeto a través del enlace en el enrutador de reacción, que es bastante feo.

También puede intentar reemplazar Link con algún otro elemento, p. el botón y el oyente de clics cambian de ubicación mediante browserHistory.push({ pathname:"/product/" + this.props.product.Id, state: this.props.product}) y el producto como propiedad state

0
Sergii Vorobei 23 feb. 2018 a las 14:18

Sugeriría usar redux para recuperar los datos. Cuando navega a la ruta del producto, puede obtener los detalles de product enviando alguna acción.

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

La ruta product debe estar conectada con la tienda. Espero que esto ayude.

2
Dev 23 feb. 2018 a las 14:04