Use urlParams in mapStateToProps in react-router v6

user_17339469 0
Viewed 853

My mapStateToProps needs the component urlParams to select a portion of the redux store and I have tried using but I keep getting the error: "TypeError: ownProps.useParams is not a function" my code

react-router-dom react-redux react-hooks reactjs javascript
1 Answers

If I'm understanding your question/code correctly, you are trying to use the collectionId route match param as a key into the selectCollection selector.

In react-router-dom v6 there are no longer route props so rendered components need to use the React hooks to access navigate, location, and match/params. You could go the route of creating a custom withRouter HOC to inject the match params as a prop, and be accessible for the connect HOC, but use of two Higher Order Components is completely unnecessary.

I propose using the hooks in the component.

import { useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';

const CollectionPage = () => {
  const { collectionId } = useParams();
  const collection = useSelector(selectCollection(collectionId));

  return (
    ... JSX ...
  );
};

export default CollectionPage;
user_86908570
Related