使用react-router-dom v6.3+Redux时读取params出现TypeError报错求助

错误原因 #

react-router-dom v6 彻底移除了组件props中的match对象，你当前通过const ProductScreen = ({match}) => {...}解构获取的match是undefined，因此访问match.params.id会抛出类型错误。

修复步骤（针对ProductScreen.js） #

1. 从react-router-dom导入useParams钩子
2. 移除组件参数中的match，改用useParams()获取路由参数
3. 更新useEffect的依赖项，替换为获取到的id

修改后的ProductScreen.js代码：

import { useParams } from 'react-router-dom'; // 新增导入
import { useDispatch, useSelector } from 'react-redux';
import { listProductDetails } from '../actions/productActions';

const ProductScreen = () => { // 移除match参数
  const { id } = useParams(); // 获取路由参数id
  const dispatch = useDispatch();
  
  const productDetails = useSelector(state => state.productDetails);
  const { loading, error, product } = productDetails;

  useEffect(() => {
    dispatch(listProductDetails(id)); // 使用id替代match.params.id
  }, [dispatch, id]); // 依赖项替换为id

  return(// 原渲染代码不变)
};

export default ProductScreen;

额外检查：路由配置 #

确保你的路由配置使用react-router-dom v6的语法，正确定义动态参数路由：

import { Routes, Route } from 'react-router-dom';
import ProductScreen from './screens/ProductScreen';

function App() {
  return (
    <Routes>
      {/* 正确定义带动态参数的路由 */}
      <Route path="/product/:id" element={<ProductScreen />} />
      {/* 其他路由... */}
    </Routes>
  );
}

其他代码确认 #

你的productActions.js、Product.js、productReducers.js代码逻辑本身没有问题，无需修改，只需确保上述两处修改完成即可解决报错。

内容的提问来源于stack exchange，提问作者Jeheu Dela Cruz