React-Redux联系人应用点击联系人无法显示详情页问题求助

你的联系人详情页无法展示，核心问题有两个：路由路径不匹配，以及React Router v6中类组件获取路由参数的方式变更，同时缺少空值判断导致渲染报错。

1. 修正路由路径匹配问题 #

在Contact.js中，你设置的跳转路径是/${card.title}，但App.js中定义的详情页路由是/card/:user，路径不匹配导致路由无法命中Card组件，因此页面只显示导航栏。

修改Contact.js中的Link路径：

// 原代码
<Link to={`/${card.title}`} className="ui header">

// 修改后
<Link to={`/card/${card.title}`} className="ui header">

2. 修复Card组件获取路由参数的问题 #

React Router v6 移除了类组件的match属性，你无法再通过ownProps.match.params获取路由参数。推荐将类组件改为函数组件，使用useParams钩子来获取参数，同时增加空值判断避免渲染报错。

重构Card.js为函数组件：

import React from "react";
import { connect } from "react-redux";
import { useParams } from "react-router-dom";

const Card = ({ cards, deleteCard }) => {
  const { user } = useParams();
  // 根据路由参数查找对应的联系人
  const card = cards.find(item => item.title === user);

  // 处理联系人不存在的情况
  if (!card) {
    return (
      <div className="ui raised very padded text container segment" style={{ marginTop: "80px" }}>
        <p>未找到该联系人</p>
      </div>
    );
  }

  const handleDelete = () => {
    deleteCard(card.id);
  };

  return (
    <div className="ui raised very padded text container segment" style={{ marginTop: "80px" }}>
      <h3 className="ui header">{card.title}</h3>
      <p>{card.body}</p>
      <button className="ui primary right floated button" onClick={handleDelete}>
        Delete
      </button>
    </div>
  );
};

const mapStateToProps = (state) => ({
  cards: state.cards
});

const mapDispatchToProps = (dispatch) => ({
  deleteCard: (id) => dispatch({ type: "deleteCard", id })
});

export default connect(mapStateToProps, mapDispatchToProps)(Card);

3. 补充删除功能的Reducer逻辑（可选） #

当前rootReducer未处理deleteCard动作，删除按钮点击后不会有效果，可补充如下：

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case "deleteCard":
      return {
        ...state,
        cards: state.cards.filter(card => card.id !== action.id)
      };
    default:
      return state;
  }
};

完成以上修改后，点击联系人条目就能正常跳转到详情页并展示内容，删除功能也能正常工作。

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