如何使用 onClick 方法通过 react-router 传递道具 [英] How to pass props with react-router using onClick methods

问题描述

我是反应的新手，甚至是反应路由器的新手，我创建了一个反应应用程序，其中包含一些路由，但有些路由需要相同的数据(道具).我想在当前页面上按下按钮时通过 onClickEvent 传输这些道具.我读到了一些尝试，比如将按钮上的 onClick 侦听器绑定到

handleOnClick(){this.props.history.push('/预订')))

重定向到名为预订"的路线.但是如何将当前页面的单个道具或整套道具传递给这个新页面?对此有什么解决方案，我如何访问重定向路由上的道具?

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

const 路由 = (<路由器><div><路由精确路径="/" component={App}/><Route path="/booked" component={Booked}/>

</路由器>);ReactDOM.render(routing, document.getElementById("root"));

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

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

预订项目:

onButtonClick() {this.props.history.push("/booked");}使成为(){返回(<div className="alignCenterDiv"><按钮onClick={this.onButtonClick.bind(this)}对齐=中心"className="buttonBooking">布臣

)}

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

解决方案

如果您使用重定向:

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

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

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

Im new to react and even newer to react-router and i create a react app which contains a few routes but some routes need the same data (props). I want to transfer those props through a onClickEvent when pressing a button on a present page. I read about some attempts like binding the onClick listener on a button to a method like

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

to redirect to a route called "booking". But how can i pass a single prop of my present page or the whole set of props to this new page? Is there any solution for this and how can i access the props on the redirected route?

Here is my Index.js, more routes will be added soon:

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

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

The routingtree should be the following: I have one mainview in my App.js which renders components of BookingItems. Within a Bookingitem i have multiple props. When i book some of the items, i should be redirected to my Booked.js component.

Within any BookingItems i have a button which should do the redirecting to the 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>
)}

Booked: Here i want to access any of the props i had in BookingItems or i created in booking item to pass it to Booked.

解决方案

If you redirect using:

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

Then, in /booking page, you can access the variables like so:

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

这篇关于如何使用 onClick 方法通过 react-router 传递道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！