类组件中如何接收react-router的Link传递的数据并解决渲染异常问题

问题原因及修复方案 #

你当前的问题由两处代码写法错误导致，按下面步骤修改即可解决：

1. 修复Link组件的传参逻辑

你现有传参有两个错误：

• 给state字段赋值时写了字符串常量'item.img'，而非动态取item的对应属性值
• 额外给state套了一层数组，没有必要，直接传对象即可
  修改后的Link代码：

<Link 
  to={{
    pathname: '/item-details',
    // 去掉数组包裹，变量不要加引号
    state: {
      img: item.img,
      count: item.count, 
      title: item.title, 
      price: item.price
    }
  }} 
  className="btn btn-bordered-white btn-smaller mt-3"
>
  <i className="icon-handbag mr-2" />查看详情
</Link>

2. 修复详情页的参数接收逻辑

withRouter注入的location对象下，你传递的参数存在location.state属性中，而非直接挂在location上，同时要确保你已经用withRouter包裹了详情组件的导出：

// 详情页导出写法示例，确保你已经加了withRouter包裹
export default withRouter(ItemDetails);

// render内取值逻辑修改
render() {
  const { location } = this.props;
  // 安全取值，避免直接访问属性报错
  const itemData = location?.state || {};
  return (
    <div className="item-info">
      {itemData.img && (
        <div className="item-thumb text-center">
          <img src={itemData.img} alt={itemData.title} />
        </div>
      )}
      {/* 其余字段直接取itemData对应属性即可，比如itemData.price */}
    </div>
  );
}

补充：用id传参的实现方案

你提到的用id传参的方案更推荐使用，适合数据来源是后端接口的场景：

• Link传参时只传id：state: { id: item.id }
• 详情页在componentDidMount生命周期中拿到id，调用后端详情接口获取完整数据渲染即可，能避免用户直接访问详情页路径时state为空的问题。

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