отправка реквизита через компонент Link-router

Question

У меня проблема с отправкой реквизита через компонент Link реактивного маршрутизатора.Это мой компонент, который отвечает за отображение определенного элемента:

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>
  );
}

После нажатия я хочу открыть страницу с определенным рецептом.Этот компонент выглядит так:

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) отображает undefined.как исправить эту ошибку?Как правильно отправлять данные через компонент Link реактивного маршрутизатора?

Я смотрел похожие темы на стеке потока, но это не помогло решить мою проблему

Answer 1

Посмотрите еще раз на документацию компонента Link.В объекте to разрешены следующие свойства:

• pathname: строка, представляющая путь к ссылке.
• search: строковое представление параметров запроса.
• хеш: хеш для вставки в URL, например # a-hash.
• состояние: состояние для сохранения в местоположении.

Полагаю, вы хотите использовать state вместо params.

РЕДАКТИРОВАТЬ:

Таким образом, ваш код будет выглядеть следующим образом:

<Link to={{pathname: `/meals/${label}`, state: {"recipe": recipe} }}>

Тогда вы можете получить доступ к state внутри связанного компонента вот так:

this.state = {
  recipe: props.location.state.recipe
};