Как передать реквизит с реакции-роутером с помощью методов onClick

Question

Я новичок в реагировании и еще новее в реагирующем маршрутизаторе, и я создаю приложение реагирования, которое содержит несколько маршрутов, но для некоторых маршрутов нужны одни и те же данные (реквизиты). Я хочу передать эти реквизиты через onClickEvent при нажатии кнопки на текущей странице. Я читал о некоторых попытках, таких как привязка слушателя 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"));

Дерево маршрутизации должно быть следующим: у меня есть один mainview в моем App.js, который отображает компоненты BookingItems. В Bookingitem у меня есть несколько реквизита. Когда я бронирую некоторые предметы, меня перенаправляют на мой компонент Booked.js.

Внутри любого BookingItems у меня есть кнопка, которая должна перенаправить на 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>
)}

Бронирования: Здесь я хочу получить доступ к любому реквизиту, который был у меня в BookingItems или создан в пункте бронирования, чтобы передать его Booked.

Answer 1

Если вы перенаправляете, используя:

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

Затем на странице /booking вы можете получить доступ к переменным следующим образом:

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

Answer 2

Вы можете сделать это так:

Ваш маршрут

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

При клике

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

Компонент бронирования

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

Для альтернативных опций вы можете прочитать это: Как получить значение параметра из строки запроса

Другой вариант (после обновления вопроса звучит как лучший вариант) - использовать redux (или что-то подобное). Когда вы нажимаете на кнопку, вы отправляете действие, чтобы установить selectedBookingItem в глобальном состоянии для выбранного элемента. Затем навигация (посмотрите на реагирующий маршрутизатор-редукс ). Компонент бронирования подключен к redux , а выбранный элемент BookingItem сопоставлен с реквизитом ( mapStateToProps ).