React新手运行代码报错Cannot read properties of undefined (reading 'params')怎么办

报错原因 #

你遇到的Cannot read properties of undefined (reading 'params')错误，是因为props.match的值为undefined：你本地安装的是React Router v6版本，而你参考的教程使用的是React Router v5版本，v6已经完全移除了props.match、props.history这类原路由组件内置属性，所以原来的教程代码无法直接运行。

解决方案 #

方案1：适配React Router v6（推荐使用新版特性） #

1. 首先在组件内引入useParams钩子拿路由参数
2. 额外增加兜底逻辑，避免id不匹配时product为undefined导致后续读取product.name报错
   修改后代码如下：

import React from 'react';
import { useParams } from 'react-router-dom';
import data from '../data';

function ProductScreen() {
  const { id } = useParams();
  const product = data.products.find(x=>x._id === id);
  // 兜底判断
  if (!product) return <div>未找到对应产品</div>
  return <div>
     <h1>{product.name}</h1>
  </div>
}

export default ProductScreen;

同时需要确认你的路由配置符合v6规范：

// 路由定义处要写对参数占位和element属性
<Route path="/product/:id" element={<ProductScreen />} />

方案2：降级到React Router v5和教程对齐 #

如果不想调整原有代码，直接把本地的react-router-dom版本降到v5即可：

npm uninstall react-router-dom
npm install react-router-dom@5

安装完成后你原有的代码可以直接正常运行。

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