类型错误：无法读取未定义的属性“参数”，我该如何解决这个问题

Question

大家好，我正在尝试将产品从主页加载到产品页面，在使用效果功能上，我不断收到错误消息：

<块引用>

TypeError: 无法读取未定义的属性 'params'

有人能发现问题吗？因为我似乎无法找到问题所在。我遇到这个问题已经有一段时间了，但我找不到解决方案。有人知道我该如何解决吗？谢谢

productpage.js

function Productpage({ history, match }) {
    const [qty, setQty] = useState(1);
    const dispatch = useDispatch();

    const productDetails = useSelector(state => state.getProductDetails)
    const { loading, error, product } = productDetails;

    useEffect(() => {
        if (product && match.params.id !== product._id) {
            dispatch(getProductDetails(match.params.id ));
        }
      }, [dispatch, match, product]);
    
    const addToBasketHandler = () => { 
        dispatch(addToBasket(product._id, qty))
        history.push(`basket`)
    }
    return (
        <div className='productpage'> 
            {loading ? <h2>Loading...</h2> : error ? <h2>{error}</h2> : (
                <>
                    <div className="productpage_left">
                <div className="product_image">
                            <img src={product.imageUrl } alt='' />
                </div>

                <div className="product_info">
                    <p className='product_name'>
                                { product.name}
                    </p>

                    <p className='product_price'>
                                £{ product.price}
                    </p>

                            <p className='product_description'>
                                {product.description}
   
                    </p>
                </div>
            </div>

            <div className="productpage_right">
                <div className="productright_info">
                    <p>
                                Price: <span>${product.price }</span>
                    </p>

                    <p>
                        Status: <span>{product.countInStock > 0 ? "In Stock" : "Out of Stock"}</span>
                    </p>

                    <p>
                        Qty: 
                         <select value={qty} onChange={(e) => setQty(e.target.value)}>
                                {[...Array(product.countInStock).keys()].map((x) => (
                             <option key={x + 1} value={x + 1}>
                                 {x + 1}
                                    </option>
                         ))}
                         </select>
                         
                    </p>

                    <p>
                                <button onClick={ addToBasketHandler} type='button'>Add to basket</button>
                    </p>

                </div>
                
                
                 </div>
                </>


            )}
                     
            

        </div>
    )
}

export default Productpage