React+Redux中使用match.params获取ID报错的解决方案求助

这个错误核心是match参数未被正确传入组件，常见于React Router版本差异或路由配置问题，以下分场景给出修复方案：

场景1：使用React Router v6及以上版本 #

React Router v6移除了通过组件props传递match、location等对象的方式，改用专门的钩子函数获取路由参数。修改步骤如下：

1. 导入useParams钩子
2. 在组件内部通过useParams()获取路由参数

修改后的代码：

import React, { useEffect } from "react";
import Carousel from "react-material-ui-carousel";
import "./ProductDetail.css";
import { useSelector, useDispatch } from "react-redux";
import { getProductDetails } from "../../actions/productActions";
// 新增导入useParams
import { useParams } from 'react-router-dom';

const ProductDetail = () => {
  const dispatch = useDispatch();
  // 获取路由参数id
  const { id } = useParams();

  const { product, loading, error } = useSelector(
    (state) => state.productDetail
  );

  useEffect(
    () => {
      // 直接使用id
      dispatch(getProductDetails(id));
    },
    [dispatch, id]
  );

  // 剩余组件代码...
};

场景2：使用React Router v5及以下版本 #

如果仍在使用v5，确保组件被Route正确包裹，或通过withRouter高阶组件注入路由props：

方式1：检查路由配置 #

确认你的路由配置中，ProductDetail是通过Route组件的component或render属性渲染的：

// 路由配置示例
import { Route } from 'react-router-dom';
import ProductDetail from './ProductDetail';

<Route path="/product/:id" component={ProductDetail} />
// 或使用render函数
<Route path="/product/:id" render={(props) => <ProductDetail {...props} />} />

方式2：使用withRouter高阶组件 #

如果组件不是直接由Route渲染（比如作为子组件嵌套在其他组件中），可以用withRouter包裹组件，注入路由相关props：

import React, { useEffect } from "react";
import Carousel from "react-material-ui-carousel";
import "./ProductDetail.css";
import { useSelector, useDispatch } from "react-redux";
import { getProductDetails } from "../../actions/productActions";
import { withRouter } from 'react-router-dom';

const ProductDetail = ({ match }) => {
  const dispatch = useDispatch();

  const { product, loading, error } = useSelector(
    (state) => state.productDetail
  );

  useEffect(
    () => {
      dispatch(getProductDetails(match.params.id));
    },
    [dispatch, match.params.id]
  );

  // 剩余组件代码...
};

// 用withRouter包裹组件
export default withRouter(ProductDetail);

内容的提问来源于stack exchange，提问作者Nayab Ali