Question

我一直在使用功能组件上的react-redux软件包connect函数来获取URL参数，但是我喜欢使用它，但是现在在基于类的组件上，我没有获得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))

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

1 个答案: