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

【问题标题】：How to save react states on browser back button?如何在浏览器后退按钮上保存反应状态？
【发布时间】：2021-08-28 12:34:12
【问题描述】：

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

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

那么第1页就是在构造函数中获取这些props并定义状态

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”

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

【问题讨论】：

单击后退按钮将导致页面重新加载，因此保存在浏览器内存中的所有状态都将丢失，以防止您需要保留可以在 localStorage 中执行的状态
你能解释一下如何保持这些状态
参考这个stackoverflow.com/questions/47495696/…

标签： reactjs

【解决方案1】：

您唯一的问题是您需要按照@Manu 的建议在状态对象中传递道具，而不是像您现在所做的那样作为随机属性名称。我为你做了一个回购here。如您所见，在沙盒窗口中按下后退按钮后，在 react-router 的状态对象中传递的属性仍然存在，但我作为道具放置的属性则没有。

【讨论】：

【解决方案2】：

您不应该通过这样的链接传递数据，因为它可能不一致；更好的方法是将您的数据作为查询参数推送到url，例如，您的 page2 将有一个类似于

的url

{baseUrl}/page2?id=someCategoryId&name=someCategoryName

然后在您的 rusulting 组件中，您可以获取并解析查询：

const searchParams = new URLSearchParams(location.search);

最好还是参考这个：https://reactrouter.com/web/example/query-parameters

【讨论】：