Reactjs 如何使用onClick方法通过react路由器传递道具

我是react新手，甚至比react路由器更新，我创建了一个react应用程序，其中包含一些路由，但有些路由需要相同的数据（道具）。当按下当前页面上的按钮时，我想通过onclick事件传递这些道具。我读过一些尝试，比如将按钮上的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"));

const路由=(
);
render（路由，document.getElementById（“根”）；

routingtree应该如下所示：我的App.js中有一个主视图，用于呈现BookingItems的组件。在一个Bookingitem中，我有多个道具。当我预订一些项目时，我应该被重定向到我的Booked.js组件

在任何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>
)}

onButtonClick（）{
这个.props.history.push（“/预订”）；
}
render（）{
返回(
布肯
)}

预订：

---

在这里，我想访问我在BookingItems中拥有的任何道具，或者我在BookingItem中创建的道具，以将其传递给Booked

您可以这样做：

你的路线

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

预订组件

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

有关其他选项，您可以阅读以下内容：

另一个选择（在问题更新之后，听起来是更好的选择）是使用redux（或类似的东西）。单击该按钮时，您将发送一个操作，将处于全局状态的selectedBookingItem设置为单击的项目。然后导航（查看反应路由器redux）。Booking组件连接到redux，selectedBookingItem映射到道具（mapStateToProps）。

如果使用以下方法重定向：

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

然后，在

/booking

页面中，您可以访问如下变量：

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

---

谢谢你的尝试。它可以工作，但不能满足我想要做的，因为这样我只能通过一个道具（在本例中为：id），我也不想在我的链接中看到该道具（…:/booking/12345）。是否有其他解决方案可以传递多个道具？@Alex，路径“/booking/：id/：name/：someOtherProp”如何？@Alex，如果您不想在路径中看到此数据，则可能需要一些状态管理，如redux。你需要什么属性来创建组件的路径？我编辑了我的主要帖子，希望能更好地理解。我需要传递道具，比如名字、目的地、价格等等。@Alex，祝你好运。我希望我的回答能对你有所帮助。这就是我想做的！非常感谢您，先生！：）

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