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'
}
*/
You can do it like this:
You route
<Route path="/booking/:id" .../>
On Click
handleOnClick(){
this.props.history.push('/booking/12345')
))
Booking component
componentDidMount(){
console.log(this.props.match.params.id);
}
For alternative options you can read this: How to get parameter value from query string
Another option (after question update it sounds like a better option) is to use redux (or something similar). When you click on the button you dispatch an action to set selectedBookingItem in global state to the clicked item. Then navigation (look at the react-router-redux). Booking component is connected to the redux and selectedBookingItem is mapped to the prop (mapStateToProps).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With