React用react-router传日期对象报DataCloneError: pushState执行失败怎么解决

错误原因 #

你遇到的DataCloneError: Failed to execute 'pushState' on 'History'报错根因如下：

• React Router 通过state传递参数时，会调用浏览器原生pushState接口，该接口要求传递的内容必须是可结构化克隆的标准基础类型
• react-dates的DateRangePicker返回的startDate、endDate是Moment实例对象，包含内置方法和非标准属性，不支持结构化克隆，所以传递会报错，普通字符串、数字等基础类型不存在这个问题。

解决方案 #

两步修改即可正常运行：

1. 传递参数前将Moment对象转为标准格式 #

修改Filters组件中Link的state配置，用toISOString()或者format()方法将Moment对象转为标准字符串，搭配可选链避免空值报错：

<Link to={{ 
  pathname: "/search", 
  state: {
    // 转ISO标准时间字符串
    startdate: startDate?.toISOString() || null,
    // 如果只需要日期格式也可以用format自定义
    // startdate: startDate?.format('YYYY-MM-DD') || null,
    enddate: endDate?.toISOString() || null,
  },
}}>
  <div className="search">
    <p>Search</p>
  </div>
</Link>

2. 接收页按需转回Moment对象（可选） #

如果search页需要用到Moment对象做日期运算，拿到参数后用moment重新实例化即可：

import moment from 'moment';
import React from "react";
import Hotellist from "./components/hotellist";
import Filters from "./components/filters";
import { useLocation } from "react-router";

function List() {
  const location = useLocation();
  const {startdate, enddate} = location.state;
  // 按需转回Moment对象
  const startDateMoment = startdate ? moment(startdate) : null;
  const endDateMoment = enddate ? moment(enddate) : null;
  console.log(startDateMoment, endDateMoment);
  return (
   <>
    </>
  );
}

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