ReactRouter - Невозможно передать реквизиты ИЛИ params в «Link to» для компонента

Question

Я новичок в React и пытаюсь сделать что-то очень простое. Я получаю доступ к API в моем родительском компоненте. Я хочу получить доступ к идентификатору каждого объекта, а затем передать его дочернему компоненту. Мне удалось получить идентификатор для отображения в URI, поэтому / предложения /: идентификатор. Я пробовал две вещи:

1. Передача идентификатора в «Ссылка на» для последующего доступа из моего компонента с помощью «props.location.state» или «this.props.location.state» - не работает.

2. Доступ к идентификатору из URI через параметры "props.match.params" - не работает.

Может кто-нибудь сказать мне, что я делаю не так?

App.js:

export default class App extends Component {

    render() {

        return (
            <div>
                <Switch>
                    <Route exact path='/offers' component={ OffersContainer }/>
                    <Route path='/offers/:id' component={ OfferContainer} />
                </Switch>
            </div>
        );
     }
  }

Родительский компонент, к которому осуществляется доступ к API:

 <Link to={{
     pathname: `/offers/${offer.id}`,
         state: {
             id: offer.id
         }
 }}> Object path </Link>

Дочерний компонент, где мне нужен идентификатор:

componentDidMount() {
    const { id } = props.location.state
}

Всегда возвращается одна и та же ошибка "реквизиты не определены"

Answer 1

В дочернем компоненте, так как это компонент класса, вы должны использовать this.props:

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

    fetch(`/api/offers/${id}`)
      ....
}