React项目报错：Cannot read properties of undefined (reading 'params')求解决

错误原因 #

你在ProductListPage组件里尝试通过props.match.params.slug获取路由参数，但React Router v6及以上版本不再自动给路由组件注入match、location这类props，导致props.match是undefined，读取它的params属性自然就会报错。

修复步骤 #

用React Router提供的useParams钩子替代原来的props.match来获取路由参数，具体修改如下：

1. 先在组件文件里导入useParams：

import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import { useParams } from "react-router-dom"; // 新增这行导入
import { getProductsBySlug } from "../../actions";
import Layout from "../../components/Layout";

2. 修改组件逻辑，直接通过useParams拿到slug：

export const ProductListPage = () => { // 不需要再接收props参数
  const dispatch = useDispatch();
  const { slug } = useParams(); // 直接获取路由里的slug参数

  useEffect(() => {
    dispatch(getProductsBySlug(slug));
  }, [dispatch, slug]); // 把dispatch和slug加入依赖项，避免代码检查警告

  return <Layout>Product List Page</Layout>;
};

额外提醒 #

• 确认你的路由配置里确实定义了slug参数，比如路由要写成这样：

<Route path="/products/:slug" element={<ProductListPage />} />

• 如果你的项目还在用React Router v5或更早版本，那要确认组件是通过<Route>的component或render属性渲染的（这样才会自动注入match）；如果是直接引入组件，就得用withRouter高阶组件包裹组件，才能拿到match props。

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