javascript - 在 react-router v6 的 mapStateToProps 中使用 urlParams

Question

我的 mapStateToProps 需要组件 urlParams 来选择 redux 存储的一部分，我尝试使用但我不断收到错误:“TypeError: ownProps.useParams is not a function” my code

Answer 1

如果我正确理解了您的问题/代码，那么您正在尝试使用 collectionId 路由匹配参数作为 selectCollection 选择器的键。

在 react-router-dom v6 中，不再有路由属性，因此渲染组件需要使用 React hooks 来访问 navigate、location，和匹配/params。您可以创建自定义 withRouter HOC 以将匹配参数作为 prop 注入(inject)，并可供 connect HOC 访问，但是完全没有必要使用两个高阶组件。

我建议在组件中使用钩子(Hook)。

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;