sending props via the react-router Link component - reactjs

Question

I have a problem with sending props through the Link component of the react-router.
This is my component that is responsible for displaying a specific element:
const ItemRecipe = ({ recipe }) => {
const { label, image } = recipe.recipe;
return (
<li>
<p> {label} </p>
<img src={image} alt="food" />
<Link to={{pathname: `/meals/${label}`, params: recipe }}>
<p>next</p>
</Link >
</li>
);
}
After clicking on I want to open the page with a specific recipe. This component looks like this
class DetailsRecipe extends Component {
constructor(props) {
super(props);
this.state = {
recipe: props.match.params.recipe
}
console.log(this.state.recipe);
}
render () {
<div>
lorem lorem
</div>
)
}
}
console.log(this.state.recipe) displays undefined.
how to fix this error? How to correctly send data through the Link component of the react-router?
I looked at similar topics on a stackoverflow but it did not help to solve my problem

Answer 1

Have another look at the documentation of the Link component. The properties allowed inside the to object are:
pathname: A string representing the path to link to.
search: A string representation of query parameters.
hash: A hash to put in the URL, e.g. #a-hash.
state: State to persist to the location.
I guess you want to use state instead of params.
EDIT:
So your code would look like this:
<Link to={{pathname: `/meals/${label}`, state: {"recipe": recipe} }}>
Then you can access the state inside the linked component like this:
this.state = {
recipe: props.location.state.recipe
};