使用React Router的Link在组件间传数据是否高效？如何解决刷新失效问题？

原有实现的问题 #

首先明确你当前的传参方式不是编辑类页面的最佳实践，核心问题有两个：

• 不符合React Router的API规范：你在to对象下直接定义user属性属于自定义字段，React Router并不会主动持久化该数据，正确的自定义路由状态应该存放在state字段下，但即使修改为规范写法，路由状态依然存放在会话内存中，页面刷新、直接访问URL、分享链接时都会丢失，这就是你刷新报错的直接原因。
• 数据一致性风险：从列表页传递的用户数据是拉取列表时的快照，如果用户数据在其他端被修改，编辑页拿到的就是过期数据，提交后会覆盖最新内容。

优化方案 #

推荐按照RESTful路由规范改造，仅通过URL传递ID参数，所有业务数据通过接口获取，具体改造步骤如下：

1. 简化TableComponent的Link传参 #

删除自定义的用户数据传递，仅保留路径参数：

<Link to={`/users/${apiData.id}`}>
  {apiData.name}
</Link>

新建用户场景直接跳转/users/new即可，不需要传任何额外参数。

2. 改造User组件，增加数据拉取逻辑 #

新增编辑场景下的用户数据请求逻辑，兼容新建场景的默认值，同时增加加载、错误处理：

import { useParams, useNavigate } from 'react-router-dom'; // v6 用useNavigate，v5用useHistory

const User = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const isEditMode = Boolean(id);

  // 初始值设为默认值，兼容新建场景
  const [newName, setNewName] = useState('');
  const [newEmail, setNewEmail] = useState('');
  const [newStatus, setNewStatus] = useState('active');
  const [newGender, setNewGender] = useState('male');
  const [loading, setLoading] = useState(false);
  const [submitLoading, setSubmitLoading] = useState(false);

  // 编辑模式下拉取最新用户数据
  useEffect(() => {
    if (!isEditMode) return;
    const fetchUserDetail = async () => {
      setLoading(true);
      try {
        const res = await axios.get(`${process.env.REACT_APP_API_URL}users/${id}`, {
          headers: {
            Authorization: `Bearer ${process.env.REACT_APP_API_TOKEN}`,
          }
        });
        const { name, email, status, gender } = res.data;
        setNewName(name);
        setNewEmail(email);
        setNewStatus(status);
        setNewGender(gender);
      } catch (err) {
        alert('用户数据获取失败，请重试');
      } finally {
        setLoading(false);
      }
    };
    fetchUserDetail();
  }, [id, isEditMode]);

  // 原有更新表单的updateName、updateEmail等方法不变，此处省略

  const updateData = async () => {
    // 可新增前端表单校验，比如邮箱格式、必填项校验，减少无效请求
    setSubmitLoading(true);
    try {
      if (isEditMode) {
        await axios.put(
          `${process.env.REACT_APP_API_URL}users/${id}`,
          { name: newName, email: newEmail, status: newStatus, gender: newGender },
          { headers: { Authorization: `Bearer ${process.env.REACT_APP_API_TOKEN}` } }
        );
      } else {
        await axios.post(
          `${process.env.REACT_APP_API_URL}users/`,
          { name: newName, email: newEmail, status: newStatus, gender: newGender },
          { headers: { Authorization: `Bearer ${process.env.REACT_APP_API_TOKEN}` } }
        );
      }
      // 提交成功后再跳转，避免提交失败仍跳走的问题
      navigate('/users');
    } catch (error) {
      if (error.response?.status === 422) {
        const tip = isEditMode 
          ? "错误：邮箱格式不正确，请按照 yourname@yourname.com 格式输入"
          : "错误：姓名或邮箱已被占用";
        alert(tip);
      }
    } finally {
      setSubmitLoading(false);
    }
  };

  if (loading) return <div>加载中...</div>;

  return (
    <Layout title={isEditMode ? "编辑用户" : "新建用户"} hasSearchBox={false}>
      {/* 原有表单输入项代码不变，仅修改按钮部分：移除按钮外层的Link，避免点击就跳转 */}
      <ButtonsContainer data-testid="actionspage-buttons">
        <CancelButton 
          variant="outlined" 
          text="取消"
          onClick={() => navigate('/users')}
        />
        <ActionsButton
          onClick={updateData}
          variant="filled"
          text={submitLoading ? "提交中..." : "确认"}
          disabled={submitLoading}
          data-testid="actionspage-updatebutton"
        />
      </ButtonsContainer>
    </Layout>
  );
};

3. 可选性能优化 #

如果你的项目使用了全局状态管理（如Zustand、Redux），且用户列表数据已经存储在全局状态中，可以优先从全局状态取对应ID的用户数据，取不到再发请求，能减少一次接口调用，进一步提升性能。

优化后的收益 #

• 彻底解决刷新报错问题，支持直接访问编辑页URL、分享编辑页链接
• 保证编辑的数据永远是最新的，避免过期数据覆盖更新
• 符合前端路由的通用设计规范，可维护性更高

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