Question

这是一个很难回答的问题，因为我的应用程序的安装方式很奇怪，但要点是我的应用程序实际上是3条路由，其中2条路由使用相同的组件，但是交换了带有API数据的屏幕，具体取决于用户是在主路由“ /”还是与数据相关的路由上，我们仅将其称为“ / getdata /：query”。这是通过在应用程序上的搜索栏中键入，并将查询发送到this.getdata（）函数来完成的，如下所示，它将使用返回的信息和推送状态的setState将URL更改为/ getdata /：query。因此，如果用户键入“鞋子”，该组件将更新以显示相关信息，并且它们现在位于example.com/getdata/shoes上。现在没有与用户按下后退按钮相关的代码，例如

//in componentdidmount
 window.onpopstate = (e)  => {
          this.handlePopState(e);
        }

//popstate event outside of componentdidmount
handlePopState(e){
    e.preventDefault();
    this.getData(this.props.location.pathname.replace("/getdata/", ""));
  }

当按下后退按钮时，将显示我在页面上访问过的所有以前的URL。例如，如果我加载站点，历史上的第一件事就是example.com，那么可以说我访问了5个getdata页面，最后以example.com/getdata/cars结尾。如果按后退按钮，则该URL将更改为example.com/getdata/previoussearch，依此类推，直到该URL为主页为止。显然，这实际上并不会改变屏幕上的内容，因为它们都是通过api调用更新的相同组件，具体取决于用户在应用程序的搜索栏中键入的内容。现在，当按下后退按钮时，上面的代码生效了，我被发送到example.com/getdata/previoussearch，所有数据实际上都已加载到（欢呼）中，但是它只会返回一个路径。如果再次按下后退按钮，即使后退按钮未变灰，也会加载相同的路径。现在，真正奇怪的是，出于好奇（也许有点开发人员的愤怒），当我快速连续多次向后退按钮发送垃圾邮件时，实际上会加载先前的条目，尽管很明显，这不是一种理想的方式试图返回一页。我应该补充一点，当用户访问第三条路线“ / about”时，上面的代码已被注释，这是一个单独的组件，然后按下“后退”按钮，它将返回到用户先前在应用中使用过的任何内容数据加载就很好（可以预料，因为它是一个单独的组件）。但是，只要上面的代码生效，它只会再次返回一条路径。因此，如果用户历史记录如下所示：example.com-> example.com/getdata/shoes-> example.com/about并按了后退按钮，则它们将最终显示在example.com/getdata/shoes上，如果再次按下它们，就像上一个示例一样，它们仍将位于example.com/getdata/shoes上。

历史记录API / React Router后退按钮奇数

0 个答案: