Question

我是React的新手，甚至是react-router的新手，我创建了一个react应用，其中包含一些路由，但有些路由需要相同的数据（属性）。我想在当前页面上按下按钮时通过onClickEvent传递这些道具。我读了一些尝试，例如将按钮上的onClick侦听器绑定到

之类的方法。

handleOnClick(){    
  this.props.history.push('/booking')
 ))

重定向到称为“预订”的路由。但是如何将当前页面的单个道具或整个道具集传递给新页面？有什么解决方案吗？我如何在重定向的路线上访问道具？

这是我的Index.js，很快就会添加更多路由：

const routing = (
 <Router>
   <div>
    <Route exact path="/" component={App} />
     <Route path="/booked" component={Booked} />
   </div>
 </Router>
 );

ReactDOM.render(routing, document.getElementById("root"));

routingtree应该为以下内容：我的App.js中有一个主视图，该主视图呈现BookingItems的组件。在Bookingitem中，我有多个道具。当我预订某些物品时，应将我重定向到Booked.js组件。

在任何BookingItems中，我都有一个按钮，应该将其重定向到Booked.js。

BookingItems：

onButtonClick() {
  this.props.history.push("/booked");
 }

render(){
 return(
          <div className="alignCenterDiv">
            <button
              onClick={this.onButtonClick.bind(this)}
              align="center"
              className="buttonBooking"
            >
              Buchen
            </button>
          </div>
)}

已预订：在这里，我想访问我在BookingItems中或在预订项中创建的任何道具，以将其传递给Booked。

Answer 1

如果您使用以下方式重定向：

this.props.history.push('/booking', {
  myProp: this.props.myProp,
  foo: 'bar'
})

然后，在/booking页中，您可以像这样访问变量：

console.log(this.props.location.state)
/*
  {
    myProp: '...',
    foo: 'bar'
  }
*/

Answer 2

您可以这样做：

您要路由

<Route path="/booking/:id" .../>

点击

handleOnClick(){    
  this.props.history.push('/booking/12345')
 ))

预订组件

componentDidMount(){
  console.log(this.props.match.params.id);
}

有关其他选项，您可以阅读：How to get parameter value from query string

另一个选项（在问题更新后，听起来像是一个更好的选择）是使用 redux （或类似方法）。当您单击该按钮时，将调度一个操作，以将处于全局状态的 selectedBookingItem 设置为该被单击的项目。然后导航（查看 react-router-redux ）。预订组件连接到 redux ，并且selectedBookingItem映射到道具（ mapStateToProps ）。

如何使用onClick方法通过react-router传递道具

2 个答案: