通过 react-router Link 组件发送 props

Question

我在通过 react-router 的 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。 如何解决此错误？如何通过 react-router 的 Link 组件正确发送数据？

我在 stackoverflow 上查看了类似的主题，但没有帮助解决我的问题

Answer 1

再看一下链接组件的documentation。 to 对象内允许的属性是：

• 路径名：表示要链接到的路径的字符串。
• 搜索：查询参数的字符串表示形式。
• hash：要放入 URL 的哈希值，例如#a 哈希。
• state：要持续到该位置的状态。

我猜你想使用state 而不是params。

编辑：

所以你的代码应该是这样的：

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

然后你可以像这样访问链接组件内的state：

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