title: TypeError: Cannot read property 'params' of undefined facing
body: <pre><code>import React from 'react'
  import Product from '../product'
  import {Row,Col,ListGroup,Button,Image}from 'react-bootstrap'
  const ProductDetails = ({match}) =&gt; {
      const product=Product.find((p)=&gt;p._id === match.params.id)
      return (
          &lt;div&gt;
         &lt;Row&gt;
             &lt;Col md={6} &gt;
          &lt;Image src={product.image} alt={product.name} fluid /&gt;
             &lt;/Col&gt;
             
         &lt;/Row&gt; 
  
         
          &lt;/div&gt;
      )
  }
  
  export default ProductDetails
  </code></pre>
  <p>I am creating a project of simple e-commerce site and importing product list  from the product.js file  and  I want to show a single product page  but facing this error like TypeError: Cannot read property 'params' of undefined
  .
  So help me to solve the issues.</p>
  <p>product.js</p>
  <pre><code>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
  </code></pre>
  <p>And this how I am calling ProductDetails components in App.js</p>
  <pre><code>import React from 'react';
  import{Route,BrowserRouter } from &quot;react-router-dom&quot;
  import './App.css';
  //import 'bootstrap/dist/css/bootstrap.min.css'
  
  import ProductDetails from './screens/ProductDetails' 
  const  App=() =&gt;{
    return (
     &lt;&gt;
      
      &lt;Route path=&quot;/product/:id&quot; &gt;
        &lt;ProductDetails/&gt;
          &lt;/Route&gt;
      
         &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>