使用history.push传递对象出现DataCloneError是否属于浏览器特有问题？

核心疑问回复 #

该错误不属于浏览器特有问题。Firefox和Chrome的报错差异仅为提示文案不同，底层触发逻辑完全遵循HTML规范中History API的统一限制。

报错原因 #

调用history.push()传递state参数时，浏览器会通过结构化克隆算法对state数据做序列化处理，该算法本身不支持克隆以下类型的值：

• 函数（含内置原生函数）
• Symbol类型
• DOM节点对象
• 存在循环引用的对象
• 部分特殊内置对象（如Error、Function构造器等）

你从ProfileContext拿到的profile对象内包含函数类型的属性，Chrome报错内容已明确指出无法克隆function () { [native code] }，因此触发了序列化失败的报错。

修复方案 #

方案1：仅传递纯数据属性 #

提取profile中需要用到的纯数据字段，剥离函数等不可克隆内容后再传递：

const gotoEditPage = () => {
  const stateProfile = {
    // 仅保留需要的纯数据属性，不要包含函数
    username: profile.username,
    avatar: profile.avatar,
    bio: profile.bio
  }
  history.push({
    pathname: '/setting',
    state: { profile: stateProfile }
  })
}

方案2：JSON序列化后传递 #

如果纯数据属性较多，可先转成JSON字符串再传递，目标页面接收后再反序列化即可，注意该方式会丢失函数、undefined、Date、正则等特殊类型的值：

// 跳转前序列化
history.push({
  pathname: '/setting',
  state: { profileStr: JSON.stringify(profile) }
})

// 目标页面解析
const profile = JSON.parse(history.location.state.profileStr)

方案3：通过全局状态存储数据 #

如果需要完整保留带方法的复杂对象，可直接通过Context、Redux、Zustand等全局状态工具存储profile数据，跳转后直接从全局状态读取，无需通过history.state传递。

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