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

再看看Link组件的documentation。 to对象中允许的属性是：

pathname：表示要链接到的路径的字符串。
search：查询参数的字符串表示形式。
哈希：要放入网址的哈希，例如＃a-hash。
状态：要坚持到该位置的状态。

我想您想使用state而不是params。

编辑：

因此您的代码应如下所示：

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

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

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

通过react-router链接组件发送道具

1 个答案: