'How can i pass useParams to mapStateToProps in React with react router v6?

In my Application I want to pass the parameter that I'm getting from useParams() to mapStateToProps function which I'm using with reselect Library . I can hardcode the value instead of passing this parameter and everything works as expected. Also, I can pass useParams().routeName directly to mapState function and it's working. But in case of using ownProps it is not working. Here is my code :

const CollectionPage = ({collection}) => {
  let params = useParams();
  let collectionPath = params.routeName;

  return (
    <div className='collection-page'>
    </div>
  )
}



const mapStateToProps = (state, ownProps) => ({
  collection: selectCollection(ownProps.collectionPath)(state)
});

export default connect(mapStateToProps)(CollectionPage);

With this code the return will be undefined but when I hardcode the value like code below its working :

const mapStateToProps = (state) => ({
  collection: selectCollection(''Some Hard Coded Value'')(state)
});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source