2

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.

Alex
  • 95
  • 3
  • 16

2 Answers2

5

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'
  }
*/
Liren Yeo
  • 2,372
  • 2
  • 12
  • 33
0

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).

Valerii
  • 1,769
  • 2
  • 9
  • 23
  • thanks for this attempt. It works but it doesnt satisfy what i want to do, cause this way i can only pass one prop (in this case: id) and i also dont want to see that prop in my link (..:/booking/12345). Any other solutions to pass more than one prop? – Alex Jan 07 '19 at 23:47
  • @Alex, how about path "/booking/:id/:name/:someOtherProp" ? – Valerii Jan 07 '19 at 23:49
  • @Alex, if you don't want to see this data in the path then probably you need some state management like redux. What properties do you need to path to the component? – Valerii Jan 07 '19 at 23:50
  • I edited my main post for hopefully better understanding. I need to pass props like name, destination, price, and much more. – Alex Jan 07 '19 at 23:56
  • thanks for updating, i will try it tomorrow with redux, but im basicaly competly new to this too :) – Alex Jan 08 '19 at 00:11
  • 1
    @Alex, Good luck. I hope my answer will help you. – Valerii Jan 08 '19 at 00:13