react-router v6中在mapStateToProps使用urlParams报错如何解决？

报错原因 #

TypeError: ownProps.useParams is not a function 报错的核心原因是你混淆了React Hook的使用规则和mapStateToProps的入参规则：

• useParams是React Router提供的专属Hook，仅支持在React函数组件的顶层作用域调用，不属于组件ownProps的原生属性
• mapStateToProps是Redux connect API的入参函数，执行时机早于组件渲染，不支持在内部调用任何React Hook

解决方案 #

方案1：函数组件使用Redux Hook写法（推荐，适配React Router v6+）

Redux官方目前优先推荐useSelector/useDispatch Hook替代旧的connect写法，和路由Hook适配性更高：

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

function YourComponent() {
  // 顶层调用路由Hook获取URL参数
  const { targetId } = useParams();
  // 结合参数筛选Redux store数据
  const filteredList = useSelector(state => state.storeList.filter(item => item.id === targetId));

  // 组件渲染逻辑
  return <div>{/* 你的渲染代码 */}</div>
}

方案2：保留connect写法适配

如果必须保留旧的connect写法，自行封装高阶组件透传路由参数即可：

1. 封装通用高阶组件withRouter（React Router v6移除了原生的withRouter，需要手动实现）

import { useParams, useLocation, useNavigate } from 'react-router-dom';

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    return <Component {...props} router={{ location, navigate, params }} />;
  }
  return ComponentWithRouterProp;
}

2. 在mapStateToProps中读取透传的参数，导出组件时先包裹withRouter再包裹connect

const mapStateToProps = (state, ownProps) => {
  const { targetId } = ownProps.router.params;
  return {
    filteredList: state.storeList.filter(item => item.id === targetId)
  };
};

export default withRouter(connect(mapStateToProps)(YourComponent));

内容的提问来源于stack exchange，提问作者Samuel Bankole