React Router参数路由获取match对象为undefined报错如何解决

你当前使用的是React Router v6版本，该版本废弃了v5版本自动向路由组件注入match、history、location属性的逻辑，因此直接从props中读取match会返回undefined。控制台的大量报错基本是因为后续代码尝试读取match下的子属性（比如match.params.id）时，对undefined读取属性触发的运行时错误。

针对你目前使用函数组件的场景，直接使用React Router v6提供的useParams钩子即可获取路由参数，修改后的ProductDetails组件代码如下：

import React from "react";
// 从react-router-dom引入需要的钩子
import { useParams } from "react-router-dom";

const ProductDetails = () => {
  // 解构获取路由中定义的id参数
  const { id } = useParams();
  console.log("路由参数id：", id);
  return <h1>Details No. {id}</h1>;
};

export default ProductDetails;

如果你的项目中有类组件需要获取路由相关属性的场景，可以自定义高阶组件封装v6提供的路由钩子，再将对应的属性通过props传递给类组件，也可以直接将类组件重构为函数组件使用官方提供的路由钩子。

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