React Route中通过Link传递数据失败问题求助

问题原因 #

1. ContactCard中用useState存储props.contact属于冗余操作，当props.contact更新时，data状态不会同步更新，可能导致传递旧数据或初始undefined
2. 直接通过URL访问/contact/:id（比如刷新页面）时，location.state会丢失——路由state仅存在内存中，刷新后会被清空

修复方案 #

1. 简化ContactCard的传参逻辑 #

移除不必要的useState，直接使用props.contact传递数据，避免状态不同步：

import React from 'react';
import user from "../images/user.png";
import { Link } from "react-router-dom";

function ContactCard(props) {
  const { id, name, email, mobile } = props.contact;

  return (
    <div>
      <div className="item">
        <div className="ui avtar image">
          <img src={user} alt="user" />
        </div>
        <div className="content">
          <Link to={`/contact/${id}`} state={{ data: props.contact }}>
            <div className="header">{name}</div>
            <div>{email}</div>
            <div>{mobile}</div>
          </Link>
        </div>
        <i
          className="trash alternate outline icon"
          style={{ color: 'red', marginTop: '7px' }}
          onClick={() => props.clickHandler(id)}
        ></i>
      </div>
    </div>
  );
}

export default ContactCard;

2. 给ContactDetails添加兼容逻辑 #

同时支持从location.state和全局联系人列表取数据，避免刷新页面后数据丢失：
首先修改App.js的路由配置，把联系人列表传给ContactDetails：

// App.js中的Route部分
<Route
  path="/contact/:id"
  element={<ContactDetails contacts={contacts} />}
/>

然后修改ContactDetails.js：

import React from 'react';
import { useLocation, useParams } from 'react-router-dom';
import user from "../images/user.png";

function ContactDetails({ contacts }) {
    const location = useLocation();
    const { id } = useParams();
    
    // 优先取state数据，无数据时从联系人列表中按id查找
    const contact = location.state?.data || contacts.find(item => item.id === id);

    if (!contact) {
        return <div className="main">联系人不存在</div>;
    }

    const { name, email, mobile } = contact;

    return (
      <div className="main">
        <div className="ui card centered">
          <div className="image">
            <img src={user} alt="user" />
          </div>
          <div className="content">
            <div className="header">{name}</div>
            <div className="description">{email}</div>
            <div className="description">{mobile}</div>
          </div>
        </div>
      </div>
    );
}

export default ContactDetails;

额外提示 #

路由state仅在通过Link组件跳转时有效，直接输入URL或刷新页面会丢失，因此通过id从数据源查找是更可靠的方案。

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