类型错误：无法读取未定义的面的属性“参数”

Question

import React from 'react'
import Product from '../product'
import {Row,Col,ListGroup,Button,Image}from 'react-bootstrap'
const ProductDetails = ({match}) => {
    const product=Product.find((p)=>p._id === match.params.id)
    return (
        <div>
       <Row>
           <Col md={6} >
        <Image src={product.image} alt={product.name} fluid />
           </Col>
           
       </Row> 

       
        </div>
    )
}

export default ProductDetails

我正在创建一个简单的电子商务网站项目，并从 product.js 文件中导入产品列表，我想显示单个产品页面，但面临此错误，如 TypeError: Cannot read property 'params' of undefined . 所以帮我解决问题。

product.js

const products=[
    {
        _id:'1',
        name:'product 1',
        images: 'https://source.unsplash.com/random'   ,
        description:' Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
        price: 50,
        countInStock:10,
        rating:4.5,
        numReviews:12,
    },
    {
        _id:'2',
        name:'product 2',
        images: 'https://source.unsplash.com/random'   ,
        description:'Lorem Ipsum is simply dummy text of the printing and typesetting industry.  ',
        price:258,
        countInStock:7,
        rating:3.5,
        numReviews:25,
    },
    {
        _id:'3',
        name:'product 3',
        images: 'https://source.unsplash.com/random'   ,
        description:'Lorem Ipsum is simply dummy text of the printing and typesetting industry.  ',
        price:500,
        countInStock:10,
        rating:4.5,
        numReviews:12,
    },
    {
        _id:'4',
        name:'product 4',
        images: 'https://source.unsplash.com/random'   ,
        description:' Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
        price:1000,
        countInStock:8,
        rating:2.5,
        numReviews:9,
    },
    
       
]
export default products

这就是我在 App.js 中调用 ProductDetails 组件的方式

import React from 'react';
import{Route,BrowserRouter } from "react-router-dom"
import './App.css';
//import 'bootstrap/dist/css/bootstrap.min.css'

import ProductDetails from './screens/ProductDetails' 
const  App=() =>{
  return (
   <>
    
    <Route path="/product/:id" >
      <ProductDetails/>
        </Route>
    
       </>
  );
}

export default App;