如何在基于 Class 的组件上使用 ownProps (react-redux)

Question

我一直在功能组件上使用 react-redux 包连接函数来获取 URL 参数，我喜欢使用它，但是现在在基于 Class 的组件上，我不是获取 URL 参数。

我错过了什么吗？我曾尝试在这里搜索类似的主题，但我不确定哪些解决方案适用于我的问题。我希望我遗漏了一些简单的东西，因为功能组件上的 ownProps 使用起来非常方便。

路由器：（我只是在这里展示一条路径。我正在使用react-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 of react-router

包装连接的组件

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

如何在基于 Class 的组件上使用 ownProps (react-redux)

How to use ownProps on a Class Based Component (react-redux)

javascript

reactjs

react-redux