React/Express基础CRUD详情页报Cannot read property 'params' of undefined错误

• 1 路由参数名不匹配：App.jsx中路由定义的路径参数为id，但Microjob.jsx中使用useParams时错误解构了不存在的microjobId字段，导致拿到的参数值为undefined
• 2 类组件错误读取路由注入属性：只有直接绑定到Route组件component属性的页面组件，才会被react-router自动注入match/location/history属性，MicrojobContainer是页面组件内部的业务子组件，没有被路由直接注入属性，因此this.props.match本身就是undefined，读取它的params自然会报错

1 修正Microjob.jsx的参数读取与传递 #

修改views/Microjob.jsx的代码，匹配路由参数名并正确传递给子组件：

import React from "react";
import { useParams } from "react-router-dom";
import { MicrojobContainer } from "../components";

export default function Microjob() {
  // 路由定义的参数名是id，直接解构id
  let { id } = useParams();
  return (
    <div>
      <MicrojobContainer id={id} />
    </div>
  );
}

2 修正MicrojobContainer的参数读取逻辑 #

修改components/MicrojobContainer.jsx的componentDidMount方法，直接读取父组件传递的id属性，不要尝试读取不存在的match属性：

componentDidMount() {
  // 直接读取父组件传过来的id属性
  this.getMicrojob(this.props.id);
}

你当前App.jsx的Menu组件里，/microjobs/:id对应的Link的to属性写死为/microjobs/:id是错误的，实际使用时需要在列表页跳转对应任务详情时，替换为具体的任务ID，示例写法为：

<Link to={`/microjobs/${job.id}`}>查看任务</Link>

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