I generate a link with a " navlink " in a component called "ProductCard" and I want to pass the props to a component called " Product "
ProductCard Component
import React, {Component} from "react";
import {NavLink} from "react-router-dom";
class ProductCard extends Component{
render() {
return (
<div className="col-xl-4 col-md-6 col-xs-12">
Nombre: {this.props.producto.name}<br/>
Precio: {this.props.producto.price}<br/>
<NavLink
to={{
pathname:"/product/" + `${this.props.producto.id}`,
aboutProps:{
product_id: `${this.props.producto.id}`,
product_name: `${this.props.producto.name}`,
}
}}
exact
> Ver producto
</NavLink>
</div>
);
}
}
export default ProductCard;
Product.js component
import React, {Component} from "react";
class Product extends Component{
constructor(props) {
super(props);
console.log(props.location.aboutProps);
this.state = {
termino: '1',
producto: []
}
}
render() {
return (
<div className="app container" style={{backgroundColor: "whitesmoke", padding: "10px"}}>
Producto1 <br/><br/><br/><br/>
</div>
);
}
}
export default Product;
The error I get is this.
I just tested the code and it should work, if you do the proper configuration.
I generated the following codesandbox: working https://codesandbox.io/s/rough-tree-9iooj
Please note that you must have all of the following:
Product.js
And
ProcutCard.js
:I think the only thing you are missing is step 1, but take into account the NavLink from step 2. Also, you can use the CodeSandbox as a reference. I hope it works for you