如何将 props 传递给 <Link>在反应路由器?React.js, javascript [英] How to pass props to &lt;Link&gt; in React Router? React.js, javascript

问题描述

我这里有这个代码.单击按钮时，lat 和 lon 将传递给一个名为 getFood 的方法，该方法需要 lat 的参数和 lon 以根据位置进行正确的 API 调用.

I have this code here. On click of button, the lat and lon gets passed to a method called getFood which expects the params of lat and lon to make the right API call based on the location.

     <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> ?

How can I pass this.props.onClick(meetup.venue.lat, meetup.venue.lon) into my <Link to="/restaurants">Find Restaurants</Link> ?

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

The user would have to click on the button, and THEN the link to 1) make the api call based on the location and then 2) to render the new component. Of course this is bad UX so I would like to not have the button element all together, if possible.

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

On my restaurants component, I can make the API call on componentDidMount however, I would still need the location.

有什么建议吗?

推荐答案

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

In Link you can pass your data in state key and retrive it in a component which will load on /forgot-password route.

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

状态对象将使用

props.history.location.state

props.history.location.state

这篇关于如何将 props 传递给 <Link>在反应路由器?React.js, javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！