在 react-router v6 的 mapStateToProps 中使用 urlParams

Posted 2023-02-22

【中文标题】在 react-router v6 的 mapStateToProps 中使用 urlParams

【英文标题】：Use urlParams in mapStateToProps in react-router v6

【发布时间】：2021-12-31 15:57:47

【问题描述】：

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

【问题讨论】：

useParams 是一个 React 钩子，因此它不会在 props 对象上，除非 some 父组件正在传递一个名为 useParams. The mapStateToProps` 函数的道具看起来一点也不正确。您是否尝试将 collectionId 路由匹配参数值传递给选择器工厂？您能否更新您的问题以包含minimal, complete, and reproducible code example？

【参考方案1】：

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

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

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

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;

【讨论】：

@SamuelBankole 对不起，我以为那部分很清楚，您现在不需要使用任何 HOC，默认将 CollectionPage 组件导出为 useSelector 钩子句柄订阅商店。

谢谢@DrewReese，它成功了。但是为什么页面打开开发者工具一直加载呢？它在这里打开源代码并指出： export function useParams(): Readonly > let matches = React.useContext(RouteContext);让 routeMatch = 匹配[matches.length - 1];返回路线匹配？ (routeMatch.params as any) : ;

@SamuelBankole Dunno，是否有相应的错误消息？

没有错误信息。当我关闭开发人员工具时它工作正常，但在我关闭开发人员工具之前没有收到选择器