Как использовать ownProps в компоненте на основе классов (реагировать на избыточность)

Question

Я использую функцию соединения с пакетами реагировать с избыточностью на функциональных компонентах, чтобы получить параметр URL, и мне нравится использовать его, однако теперь для компонента на основе классов я не получаю параметры URL.

Я что-то упустил? Я попытался найти похожую тему здесь, но я не уверен, какое из решений применимо к моей проблеме. Я надеюсь, что мне не хватает чего-то простого, так как ownProps по функциональным компонентам настолько удобен в использовании.

Маршрутизатор: (Я просто показываю один путь здесь. Я использую response-router-dom )

<Route path="/destination/:id" component={Destination}/>

Компонент:

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Destination extends Component {
    state = {

    }
    render() {
        return (
            <div>
                The ID is: {this.props.id}
            </div>
        )
    }
}

const mapStateToProps = (state, ownProps) => {
    const id = ownProps.match.params.id
    return {
        id
    }
}

export default connect(mapStateToProps)(Destination)

Когда я захожу на URL, я получаю эту ошибку:

TypeError: Невозможно прочитать свойство 'params' из неопределенного

Спасибо!

Answer 1

Вам нужно будет обернуть подключенный компонент с withRouter HOC react-router

export default withRouter(connect(mapStateToProps)(Destination))