React-router location state为空 DateObject存路由状态跳转后丢失

问题根因 #

react-router的路由state仅支持原生可序列化的JSON数据类型，而react-multi-date-picker的DateObject是第三方库自定义的类实例，路由在做状态跨页面传递/持久化时，会自动对state做序列化处理，自定义类的原型、内置私有属性都会在序列化过程中丢失，所以跳转后拿到的就是空对象。

解决方案 #

方案1：转基础类型存储（推荐） #

存储时把DateObject转成可序列化的时间戳/ISO字符串，读取时再转回DateObject实例即可：

// 存储时的逻辑
import DateObject from "react-multi-date-picker";

let history = useHistory();
// 转成时间戳（数字类型可直接序列化）
history.replace({pathname: "/", state: {dateTimestamp: new DateObject().valueOf()}});
history.push({pathname: "/another-path"});

// 回退后读取的逻辑
import DateObject from "react-multi-date-picker";

let location = useLocation();
// 读取时转回DateObject实例
const date = location.state?.dateTimestamp ? new DateObject(location.state.dateTimestamp) : null;
console.log(date);

方案2：更换存储载体 #

如果需要避免来回转换，可以选择把日期存在全局状态（比如useContext、Zustand、Redux）中，全局状态存在应用内存里，路由跳转不会触发状态序列化，不会丢失实例属性。如果需要刷新页面也保留状态，可以把序列化后的时间戳存在localStorage中，读取时再转成DateObject实例。

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