React单商品页报错：Cannot read properties of undefined (reading 'params')求助

• 该报错触发的核心原因是你使用的是 React Router v6 版本，该版本已经正式移除了组件props中默认注入的match对象，你代码中解构得到的match为undefined，调用match.params自然会抛出类型错误。

官方推荐使用useParamsHook直接获取路由参数，修改后的代码示例如下：

import { useParams } from 'react-router-dom'
import { useState, useEffect } from 'react'
import axios from 'axios'

function ProductScreen() {
  const [product, setProduct] = useState({})
  // 直接调用useParams获取路由中定义的id参数
  const { id } = useParams()

  useEffect(() => {
    const fetchProduct = async () => {
      const { data } = await axios.get(`/api/products/${id}`)
      setProduct(data)
    }

    fetchProduct()
  }, [id])
}

• 如果你需要兼容React Router v5及更早版本，可以添加可选链做空值防护，避免参数为空时报错：

const { data } = await axios.get(`/api/products/${match?.params?.id ?? ''}`)

• 如果你确实需要使用类似原match的功能，React Router v6也提供了useMatchHook可以替代，不过仅获取路由参数的场景下，useParams是更简洁的实现方案。

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