React 无法检测到 URL 参数

Question

你可以在图片中看到，它可能是 React Router DOM 4 的问题，在文档中它使用功能组件，但这是基于 class 的组件，我找不到解决方案：

用于从 url 参数获取产品 ID 的产品页面代码：

componentDidMount() {
    const {id} = this.props.match.params;
    this.props.fetchProduct(id);
}
render() {
    const {product} = this.props;
    return _.map(product, prod => {


        return (

            <div className="container">
                <section className="pt-15 pb-15">
                    <div id="col_back">

                        <header className="block">
                            <h1 className="fs-30 fw-300 mb-0">{prod.brand}</h1>

                        </header>
                    </div>
                </section>
            </div>
            )}
    )}
}



function mapStateToProps({products}, ownProps) {
    return {product: products[ownProps.match.params.id]};
}

export default connect(mapStateToProps, {fetchProduct})(ProductDetail);

路线代码：

<BrowserRouter>
        <div>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route path="/cart" component={Cart}/>
                <Route path="/products" component={Products}/>
                <Route path="/:id" component={ProductPage}/>
                <Route path="/*" component={NotFound}/>
            </Switch>
            <br/>
            <br/>
            <Footer/>
        </div>
    </BrowserRouter>

cannot read property

Answer 1

用 withRouter 包装你的连接 HOC，你将能够访问参数，

componentDidMount() {
    const {id} = this.props.match.params;
    this.props.fetchProduct(id);
}
render() {
    const {product} = this.props;
    return _.map(product, prod => {


        return (

            <div className="container">
                <section className="pt-15 pb-15">
                    <div id="col_back">

                        <header className="block">
                            <h1 className="fs-30 fw-300 mb-0">{prod.brand}</h1>

                        </header>
                    </div>
                </section>
            </div>
            )}
    )}
}



function mapStateToProps({products}, ownProps) {
    return {product: products[ownProps.match.params.id]};
}

export default withRouter(connect(mapStateToProps, {fetchProduct})(ProductDetail));

React 无法检测到 URL 参数

React cannot detect URL params

reactjs

react-router

react-router-v4