title: TypeError: Cannot read properties of undefined (reading 'params') reactjs class based component
body: <p>I am using class based component with <code>reactjs</code> in my project and I want to access a single id from the database but I end up with this error</p>
  <pre><code>'TypeError: Cannot read properties of undefined (reading 'params')'
  </code></pre>
  <p>Seems in function component using Hooks work with <code>useParams</code> so how does this work with class based component, I am using react &quot;^17.0.2&quot;, Here are my sample codes.</p>
  <pre><code>    import React, { Component, Fragment } from 'react'
      import PageTop from '../components/PageTop/PageTop'
      import TopNavigation from '../components/TopNavigation/TopNavigation'
      import Footer from '../components/Footer/Footer'
      import ProjectDetails from '../components/ProjectDetails/ProjectDetails'
      
       class ProjectDetailsPage extends Component {
      
            constructor({match}){
                super();
                this.state ={
                  ProjectPassedID:match.params.projectID
                }
            }
            
      
          componentDidMount(){
           window.scroll(0,0)
         }
       render() {
        return (
         &lt;Fragment&gt;
          &lt;TopNavigation title=&quot;Project Details&quot;/&gt;
           &lt;PageTop pageTitle=&quot;Project Details&quot;/&gt;
           &lt;ProjectDetails id={this.state.ProjectPassedID} /&gt;
           &lt;Footer/&gt;
         &lt;/Fragment&gt;
        )
       }
      }
      
      export default ProjectDetailsPage
  
  
  
  
      import React, { Component, Fragment } from 'react'
      import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
      import { Col, Container, Row } from 'react-bootstrap'
      import projectDetails from '../../assets/image/pdetails.png'
      import {faCheckSquare} from '@fortawesome/free-solid-svg-icons'
       class ProjectDetails extends Component {
      
                  constructor(props){
                    super();
                    this.state ={
                      MyprojectId:props.id
                    }
                  }
          
       render() {
        return (
         &lt;Fragment&gt;
                  &lt;Container className=&quot;mt-5&quot;&gt;
                      &lt;Row&gt;
                           &lt;Col lg={6} md={6} sm={12}&gt;
                         &lt;div className=&quot;about-thumb-wrap after-shape&quot;&gt;
                          &lt;img className=&quot;projectDetailsImg&quot; src={projectDetails} alt=&quot;&quot; /&gt;
                         &lt;/div&gt;
                           &lt;/Col&gt;
      
                           &lt;Col lg={6} md={6} sm={12} className=&quot;mt-5&quot;&gt;
                         &lt;div className=&quot;project-details&quot;&gt;
                          &lt;h1 className=&quot;projectDetailsText&quot;&gt;{this.state.MyprojectId}.&lt;/h1&gt;
       &lt;/div&gt;
                           &lt;/Col&gt;
                      &lt;/Row&gt;
          &lt;/Container&gt;
         &lt;/Fragment&gt;
        )
       }
      }
      
      export default ProjectDetails
  
  
  
  
      import React, { Component, Fragment } from 'react'
      import { Routes, Route} from &quot;react-router-dom&quot;;
      import AboutPage from '../pages/AboutPage';
      import AllCoursePage from '../pages/AllCoursePage';
      import AllServicePage from '../pages/AllServicePage';
      import HomePage from '../pages/HomePage'
      import ContactPage from '../pages/ContactPage';
      import PortifolioPage from '../pages/PortifolioPage';
      import RefundPage from '../pages/RefundPage';
      import TermsPage from '../pages/TermsPage';
      import PrivacyPage from '../pages/PrivacyPage';
      import ProjectDetailsPage from '../pages/ProjectDetailsPage';
      import CourseDetailsPage from '../pages/CourseDetailsPage';
      
      class AppRouter extends Component {
       render() {
        return (
         &lt;Fragment&gt;
        
          &lt;Routes&gt;
                &lt;Route exact path=&quot;/&quot; element={&lt;HomePage/&gt;}/&gt;
                &lt;Route exact path=&quot;/service&quot; element={&lt;AllServicePage/&gt;}/&gt;
                &lt;Route exact path=&quot;/course&quot; element={&lt;AllCoursePage/&gt;}/&gt;
                &lt;Route exact path=&quot;/portifolio&quot; element={&lt;PortifolioPage/&gt;}/&gt;
                &lt;Route exact path=&quot;/about&quot; element={&lt;AboutPage/&gt;}/&gt;
                &lt;Route exact path=&quot;/contact&quot; element={&lt;ContactPage/&gt;}/&gt;
                &lt;Route exact path=&quot;/refund&quot; element={&lt;RefundPage/&gt;}/&gt;
                &lt;Route exact path=&quot;/terms&quot; element={&lt;TermsPage/&gt;}/&gt;
                &lt;Route exact path=&quot;/privacy&quot; element={&lt;PrivacyPage/&gt;}/&gt;
                &lt;Route exact path=&quot;/projectdetails/:projectID&quot; element={&lt;ProjectDetailsPage/&gt;}/&gt;
               
            &lt;/Routes&gt;
             
         &lt;/Fragment&gt;
        )
       }
      }
      
      export default AppRouter
  
  
      
  </code></pre>