如何在 React Router 的链接中将 Props 传递给目标组件？

在 Link React-Router 中传递 Props

React-Router 的 Link 组件允许将属性传递给目标组件。然而，确保正确的路由配置以促进数据传输至关重要。

当路由路径与预期的属性检索不匹配时，就会出现问题。在提供的代码中，对于目标组件缺少相应的路径：

<Route name="ideas" handler={CreateIdeaView} />

要解决问题并通过链接传递属性，请在路由配置中指定路径，确保其与 中的参数对齐。组件：

<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />

:testvalue 占位符参数对应于 中传递的属性：

<Link to="ideas" params={{ testvalue: "hello" }} />

现在可以在目标组件的 render 方法中访问属性：

render: function() {
  console.log(this.props.match.params.testvalue); // logs "hello"
}

在功能组件中使用钩子，你可以像这样访问 props：

const CreatedIdeaView = () => {
  const { testvalue } = useParams();
  console.log(testvalue); // logs "hello"
}

或者，如果你需要传递查询参数而不是路径参数，你可以像这样使用它:

<Link to={{pathname: '/ideas', query: {testvalue: "hello"}}} />

目标组件中：

componentDidMount() {
    console.log(this.props.location.query.testvalue) // logs "hello"
}

以上是如何在 React Router 的链接中将 Props 传递给目标组件？的详细内容。更多信息请关注PHP中文网其他相关文章！