title: How to use useParams in mapStateToProps?
body: <p>I want specific prop from route params and use it to filter data in <code>redux-store</code>.</p>
  <h3>Product.js</h3>
  <pre><code>import React from 'react';
  import { useParams } from 'react-router-dom';
  import { connect } from 'react-redux';
  
  const Product = (props) =&gt; {
      let { slug } = useParams();
      //console.log(props.match)
      return (
          &lt;div&gt;
              &lt;h3&gt;Welcome to &lt;b&gt;{ slug }&lt;/b&gt; page&lt;/h3&gt;
          &lt;/div&gt;
      )
  }
  
  const mapStateToProps = ( state, ownProps  ) =&gt; {
      // let id = slug;
  
      return { item: state.items[0]}
  }
  
  export default connect(
      mapStateToProps
  )(Product);
  </code></pre>
  <h3>App.js</h3>
  <pre><code>function App() {
    return (
      &lt;Router&gt;
        &lt;Navbar/&gt;
        &lt;Switch&gt;
          &lt;Route exact path=&quot;/:slug&quot;&gt;
            &lt;Product/&gt;
          &lt;/Route&gt;
          &lt;Route exact path=&quot;/&quot;&gt;
            &lt;Home/&gt;
          &lt;/Route&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    );
  }
  </code></pre>
  <p>and whatever links that navigate to <code>/slug</code> path are ended up in <code>Product.js</code>, Since <code>Product.js</code> is being nested nowhere else so i couldn't get specific props pass down but route params. From my perspective this is completely wrong but i couldn't figure out a better way to do it.</p>