时间戳

首页 > 解决方案 > 如何在浏览器后退按钮上保存反应状态？

reactjs - 如何在浏览器后退按钮上保存反应状态？

问题描述

我有 3 个组件/页面Home、page1、page2，我正在从 home 发送道具并调用 page1

<Link
  style={{ textDecoration: "none", color: "inherit" }}
  to={{
    pathname: "/page1",
    Props: { categoryID: val.id, categoryName: val.name }
  }}
/>;

然后第 1 页在构造函数中获取这些道具并定义状态

class BuyerItems extends Component{
    constructor(props) {
        super(props);
        this.state = {
          id: props.location.aboutProps.categoryID,
          name: props.location.aboutProps.categoryName,
          gigs:[],
        }
        this.getGigs();
      }

现在从这里开始，如果我通过链接转到page2，然后按浏览器后退按钮，则会出现以下错误

TypeError：无法读取未定义的属性“categoryID”

如何从历史中获取这些道具或状态以及在哪里编写该代码？ 错误

标签： reactjs

解决方案

您唯一的问题是您需要按照@Manu 的建议在状态对象中传递道具，而不是像您现在所做的那样作为随机属性名称。我在这里为你做了一个回购。正如您所看到的，在反应路由器的状态对象中传递的属性在按下沙箱窗口中的后退按钮后仍然存在，但我作为道具放置的属性不是。

推荐阅读