如何通过道具与react-router使用onhtml方法

Question

我是新的反应，甚至是新的反应路由器，我创建了一个反应应用程序，其中包含一些路由，但有些路由需要相同的数据（道具）。当按下当前页面上的按钮时，我想通过onClick事件传输这些道具。我读到一些尝试，比如将按钮上的onclicklistener绑定到类似的方法

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

重定向到称为“预订”的路线。但是我怎么能把我现在页面的一个道具或者整套道具传递到这个新页面呢？是否有任何解决方案，我如何访问重定向路线上的道具？

这是我的ndex.js，更多的路线将很快添加：

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

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

在任何BookingItems中，我都有一个按钮，可以重定向到Booked.js。

预订项目：

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中拥有的任何道具，或者我在BookingItem中创建的道具，以将其传递给Booked。

Answer 1

你可以这样做：

你的路线

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

点击

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

预订组件

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

另一个选择（问题更新后，听起来更好）是使用redux（或类似的东西）。当您单击按钮时，您会发送一个操作，将selectedBookingItem设置为全局状态。然后导航（看看反应-路由器-redux）。Booking组件连接到redux并且selectedBookingItem被映射到prop（mapStateToProps）。

Answer 2

如果使用重定向：

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

然后，在/booking页面中，您可以访问如下变量：

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