React项目报错Uncaught TypeError:无法读取undefined的params属性求助

报错原因 #

你用的是react-router-dom v6，但参考的教程是旧版本（v5及更早）。v6里不再通过组件props传递match对象，直接解构{match}会得到undefined，自然无法读取match.params.id。

修复步骤 #

修改ProductDetails.js代码，改用v6提供的useParams钩子获取路由参数：

1. 首先导入useParams：

import React, { Fragment, useEffect } from 'react'
import { Carousel } from 'react-bootstrap'
import { useParams } from 'react-router-dom' // 新增这行

import Loader from '../layout/Loader'
import MetaData from '../layout/MetaData'

import { useAlert } from 'react-alert'
import { useDispatch, useSelector } from 'react-redux'
import { getProductDetails, clearErrors } from '../../actions/productActions'

2. 移除组件参数中的match，改用useParams获取id：

const ProductDetails = () => { // 删掉{ match }
    const dispatch = useDispatch();
    const alert = useAlert();
    const { id } = useParams(); // 新增这行，获取路由参数id

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

    useEffect(() => {
        dispatch(getProductDetails(id)) // 把match.params.id换成id
    
        if(error) {
            alert.error(error);
            dispatch(clearErrors())
        }
    
    }, [dispatch, alert, error, id]) // 依赖项里换成id

    // 补充组件渲染逻辑（根据你的需求展示loading、product等内容）
    return (
        <Fragment>
            {/* 你的组件内容 */}
        </Fragment>
    )
}

export default ProductDetails

额外说明 #

• 可以通过package.json确认react-router-dom版本为v6（版本号以6开头）
• 你当前App.js里Routes、Route的写法符合v6规范，无需修改

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