Question

我这里有这个代码。点击按钮后，lat和lon会传递给名为getFood的方法，该方法需要lat和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）呈现新组件。当然这是糟糕的用户体验，所以如果可能的话，我希望不要将按钮元素放在一起。

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

有什么建议吗？

Answer 1

在链接中，您可以使用状态键传递数据，然后在一个将加载/忘记密码路由的组件中将其检索。

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

状态对象将使用

进行检索

props.history.location.state

Answer 2

喜欢那个？

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

Answer 3

如果您使用DataFrame v2，则可以使用ID表示法（Docs）传递带有URL查询字符串的位置。见下面的例子：

react-router

在<Link to={object} />组件中，您可以访问<Link to={{ pathname: '/restaurants', search: `?lat=${meetup.venue.lat}&lon=${meetup.venue.lon}` }} />对象中的这些属性（例如：Restaurants）

如何将道具传递给React路由器中的<link />？ React.js，javascript

3 个答案: