React Router Dom传递商品ID到详情页时params读取错误如何解决

问题根因 #

你使用的是React Router v6版本，该版本已经完全移除了旧版本（v5及更早）中通过组件props传递match、location、history等路由相关对象的设计，所以调用props.match时会抛出undefined的错误。

解决方案 #

修改ProductScreen组件代码，使用v6提供的useParamsHook获取路由参数即可：

import React from 'react';
import data from '../data';
// 新增导入useParams
import { useParams } from 'react-router-dom';

function ProductScreen() {
    // 调用useParams获取路由参数，解构的参数名要和路由定义里的占位符:id完全一致
    const { id } = useParams();
    console.log(id);
    return <div>Product Screen</div>
}

export default ProductScreen;

补充说明 #

• 路由参数的解构名必须和App.js中Route路径定义的占位符完全匹配，你这里路径写的是/product/:id，所以解构的时候就用const { id } = useParams()
• 如果需要获取其它路由相关对象，可分别使用v6提供的useLocation、useNavigate等Hook实现旧版本props.location、props.history的能力

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