mapStateToProps react router dom v6 useParams()

Question

BlogDetailsPage.js

import { connect } from "react-redux";
import { useParams } from "react-router-dom";

const BlogDetailsPage = (props) => {
  const { id } = useParams();
  return <div>Blog Details: {}</div>;
};

const mapStateToProps = (state, props) => {
  const { id } = useParams();
  return {
    blog: state.blogs.find((blog) => {
      return blog.id === id;
    }),
  };
};

export default connect(mapStateToProps)(BlogDetailsPage);

How to use mapStateToProps in "useParams()" react-router-dom ?

and whatever links that navigate to /slug path are ended up in BlogDetailsPage.js, Since BlogDetailsPage.js 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.

Compiled with problems:X

ERROR


src\components\BlogDetailsPage.js
  Line 11:18:  React Hook "useParams" is called in function "mapStateToProps" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.```

Answer 1

I think, react hook functions are allowed to use inside of react component. Outside of react components, it's not allowed to use react api hook functions. Thanks, I'd liked to help you my answer.