React路由报错：无法读取undefined的params属性，求修复方案

问题根源 #

你使用的是react-router-dom v6，该版本已移除match这个props，所以组件里解构{match}得到的是undefined，访问match.params.id自然会抛出错误。

解决方案 #

使用react-router-dom v6提供的useParams钩子获取URL参数，具体修改如下：

1. 修改ProductDetails组件 #

• 导入useParams钩子
• 移除组件参数中的match
• 用useParams获取URL里的id
• 新增加载、错误状态的处理，避免页面空白

修改后的完整代码：

import React,{useEffect}from 'react'
import Carousel from "react-material-ui-carousel"
import { useParams } from 'react-router-dom'; // 新增导入

import "./ProductDetails.css"
import {useSelector,useDispatch} from "react-redux"
import { getProductDetails, clearErrors } from '../../actions/productAction'
import Loader from '../layout/Loader/Loader'; // 导入Loader组件


const ProductDetails = () => { // 移除match参数
    const dispatch=useDispatch();
    const { id } = useParams(); // 获取URL中的id参数

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

    useEffect(() => {
      if(error){
        console.error(error);
        dispatch(clearErrors());
      }
      dispatch(getProductDetails(id))
    }, [dispatch, id, error])
    
    // 加载状态显示Loader
    if(loading){
      return <Loader />;
    }

    // 错误状态显示错误信息
    if(error){
      return <div className="error-message">{error}</div>;
    }

    // 产品不存在时的提示
    if(!product){
      return <div>产品不存在</div>;
    }

  return (
    <>
    <div className="ProductDetails">
        <div>
           <Carousel>
                { product.images &&
                  product?.images?.map((item, i) => (
                    <img
                      className="CarouselImage"
                      key={item.url}
                      src={item.url}
                      alt={`${i} Slide`}
                    />
                  ))}
              </Carousel>
        </div>
    </div>
   
    </>
  )
}

export default ProductDetails

2. 额外说明 #

• 从你的App.js代码里的Routes组件可以确认是react-router-dom v6（v5版本用的是Switch），所以必须用v6的钩子来获取参数
• 新增的加载、错误状态处理，能让用户看到明确的反馈，而不是空白页面

内容的提问来源于stack exchange，提问作者Akash Yadav