title: React - TypeError: Cannot read properties of undefined (reading 'params')
body: <h2>So I'm having an error message - TypeError: Cannot read properties of undefined (reading 'params')</h2>
  <pre><code>TypeError: Cannot read properties of undefined (reading 'params')
         5 | import products from '../products'
         6 | 
         7 | function ProductScreen({ match }) {
         8 |     const product = products.find((p) =&gt; p._id == match.params.id)
         9 |     return (
        10 |         &lt;div&gt;
        11 |             {product.name}
  </code></pre>
  <p>This is my ProductScreen.js file where is causing an issue</p>
  <pre><code>import React from 'react'
  import { Link } from 'react-router-dom'
  import { Row, Col, Image, ListGroup, Button, Card } from 'react-bootstrap'
  import Rating from '../components/Rating'
  import products from '../products'
  
  function ProductScreen({ match }) {
      const product = products.find((p) =&gt; p._id == match.params.id)
      return (
          &lt;div&gt;
              {product.name}
          &lt;/div&gt;
      )
  }
  
  export default ProductScreen
  </code></pre>
  <p>and my App.js</p>
  <pre><code>import { Container } from 'react-bootstrap'
  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
  import Header from './components/Header'
  import Footer from './components/Footer'
  
  import HomeScreen from './screens/HomeScreen'
  import ProductScreen from './screens/ProductScreen'
  
  function App() {
    return (
      &lt;Router&gt;
        &lt;Header /&gt;
        &lt;main className=&quot;py-3&quot;&gt;
          &lt;Container&gt;
            &lt;Routes&gt;
              &lt;Route path='/' element={&lt;HomeScreen/&gt;} exact /&gt;
              &lt;Route path='/product/:id' element={&lt;ProductScreen/&gt;} /&gt;
            &lt;/Routes&gt;
          &lt;/Container&gt;
        &lt;/main&gt;
        &lt;Footer /&gt;
      &lt;/Router&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>I also tried to change match.params.id to Number or ParseInt (match.params) and still gave me an error...</p>
  <p>I know this is very simple but I'm stuck here and cannot go further... Any help would be appreciated!</p>
  <p>One more question - Inside App.js, where Route is, in the tutorial was using components={} attribute instead of element={}. And when I tried the same it gave me an error, so I had to fix it another way. Do you know why it caused an error?</p>
  <p>From the tutorial</p>
  <pre><code>&lt;Route path='/' component={HomeScreen} exact /&gt;
  </code></pre>
  <p>My fix --</p>
  <pre><code>&lt;Route path='/' element={&lt;HomeScreen/&gt;} exact /&gt;
  </code></pre>