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

【问题标题】：How to pass props to <Link> in React Router? React.js, javascript如何在 React Router 中将 props 传递给 <Link>？反应.js, javascript
【发布时间】：2018-01-16 23:55:11
【问题描述】：

我这里有这段代码。单击按钮时，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 调用，但是我仍然需要该位置。

有什么建议吗？

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

在 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

【讨论】：

【解决方案2】：

喜欢吗？

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

【讨论】：

【解决方案3】：

如果您使用的是react-router v2，您可以使用<Link to={object} /> 表示法(Docs) 将位置与URL 查询字符串一起传递。请参见下面的示例：

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

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

【讨论】：