如何在 React Router 中将 props 传递给 <Link>？React.js, javascript

IT技术 javascript reactjs react-router
2021-05-09 08:56:05

我这里有这个代码。单击按钮时，lat和lon将传递给一个被调用的方法，该方法getFood需要 的 paramslat并lon根据位置进行正确的 API 调用。

     <button
            onClick={() => this.props.onClick(meetup.venue.lat, meetup.venue.lon)}>
            <Link to="/restaurants">Find Restaurants</Link>
     </button>

我怎样才能this.props.onClick(meetup.venue.lat, meetup.venue.lon)进入我的<Link to="/restaurants">Find Restaurants</Link>？

用户必须点击按钮，然后链接到 1) 根据位置进行 api 调用，然后 2) 呈现新组件。当然，这是糟糕的用户体验，所以如果可能的话，我不想将按钮元素放在一起。

在我的餐厅组件上，我可以进行 API 调用，componentDidMount但是，我仍然需要位置。

有什么建议？

3个回答

在 Link 中，您可以在状态键中传递您的数据，并在将加载到 /forgot-password 路由的组件中检索它。

<Link 
    className="link-text-color"
    to={{
         pathname: "/forgot-password",
         state: { modal: true, returnTo:this.props.location.pathname}
       }}
>
forgot password
</Link>

状态对象将使用检索

props.history.location.state

像那样？

<Link to={`/restaurants/${meetup.venue.lat},${meetup.venue.lon}`}>Find Restaurants</Link>

如果您使用的是react-routerv2，则可以使用<Link to={object} />符号 ( Docs )传递带有 URL 查询字符串的位置。请参阅下面的示例：

<Link to={{
    pathname: '/restaurants',
    search: `?lat=${meetup.venue.lat}&lon=${meetup.venue.lon}`
}} />

在您的Restaurants组件，您可以在内部访问这些属性props.history的对象（例如：history.location.search）

其它你可能感兴趣的问题
上一篇循环显示多个菜单 下一篇在 React 应用程序中插入分页符 <table>