如何在基于类的组件（react-redux）上使用ownProps

Question

I have been using the react-redux packages connect function on functional components to get a URL parameter and I love using that, however now on a Class-based component, I am not getting the URL parameters.

Am I missing something? I have tried searching for a similar topic on here, but I'm not certain which of the solutions are applicable to my problem. I hope I'm missing something simple, as the ownProps on functional components is so convenient to use.

Router: (I am just showing the one path here. I am using react-router-dom )

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

Component:

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)

When I go to the URL, I get this error:

TypeError: Cannot read property 'params' of undefined

Thank you!

Answer 1

您将需要使用react-router的withRouter HOC包装连接的组件

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