title: how to get match, location, history props in react router DOM 5 using component class?
body: <p>This question is specifically for <code>react-router-dom</code> version 5.</p>
  <p>Here's my <code>App</code> component following the structures of the <a href="https://reactrouter.com/web/guides/quick-start" rel="nofollow noreferrer">quick start guide</a>:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import ProductDetails from &quot;./components/productDetails&quot;;
  
  class App extends Component {
    render() {
      return (
        &lt;Switch&gt;
          &lt;Route path=&quot;/products/:id&quot;&gt;
            &lt;ProductDetails /&gt;
          &lt;/Route&gt;
        &lt;/Switch&gt;
      );
    }
  }
  </code></pre>
  <p>And here's my <code>productDetails.jsx</code>:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  
  class ProductDetails extends Component {
    render() {
      return (
          &lt;h1&gt;Product Details - {this.props.match.params.id}&lt;/h1&gt;
      );
    }
  }
  export default ProductDetails;
  </code></pre>
  <p>which
  How to get the <code>this.props.match.params.id</code> in class component way, not function way.
  Also I found that the corresponding props empty:<br />
  <a href="https://i.stack.imgur.com/X5syy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X5syy.png" alt="enter image description here" /></a></p>
  <p>but, those values are in <code>Router.Provider</code>:
  <a href="https://i.stack.imgur.com/svGqr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/svGqr.png" alt="enter image description here" /></a></p>
  <p>So, how to get all the <code>Route</code> component's props from it's children using class?</p>