React-router 位置状态对象为空答案

【问题标题】：React-router location state object is emptyReact-router 位置状态对象为空
【发布时间】：2021-09-07 12:18:05
【问题描述】：

我正在尝试使用 react-multi-date-picker 库中的 DateObject 对象通过 react-router 保持状态：https://shahabyazdi.github.io/react-multi-date-picker/date-object/。但是当我在导航后尝试访问状态时，对象被清空了。

let history = useHistory();
history.replace({pathname: "/", state: {date: new DateObject()});
history.push({pathname: "/another-path"});

let history = useHistory();
history.goBack();

let location = useLocation();
console.log(location.state.date);

import { BrowserRouter, Switch, Route } from "react-router-dom";

function Router() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/">
          <CustomDatePicker />
        </Route>
        <Route path="/another-path">
          <AnotherComponent />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default Router;

导航前

导航后

【问题讨论】：

该值作为 prop 传递给 / 引用的组件
尝试访问道具，但导航后对象似乎为空。就像我发布的图片一样。
也许你可以尝试类似： ( )} / >
你能分享处理“/”路由的组件的代码吗？
我在上面添加了路由器组件

标签： reactjs react-router history

【解决方案1】：

创建一个由new DateObject() 定义的新状态并将其传递给它。比如

this.setState({myNewState: new DateObject()})
// then pass it through
history.replace({pathname: "/", state: {date: myNewState});

如果它是一个功能组件，则为 useState。

希望有效

【讨论】：

如果我放任何其他对象、字符串、数字......它工作正常，但是当我放这个“new DateObject()”时，事情变得很奇怪。

【解决方案2】：

我找到了解决办法！我使用 react-multi-date-picker 库中的 toDate() 方法将自定义 DateObject 转换为 javascript Date 对象并将其存储在状态中。出于某种原因，将 DateObject() 存储在历史堆栈中，导航并返回是行不通的！谢谢！

【讨论】：