javascript - 如何处理由崩溃导致的 404 页面返回。反应路由器

Question

让我们假设以下场景。

我在使用我的 React 网站时，发生了崩溃，并呈现了 404 页面。此网页包含一个“返回按钮”，它应该让用户返回导航。问题是，它不能带他回到上一页，因为上一页创建了404页面，所以会陷入死循环。

我的方法是在网站崩溃之前跟踪 2 个 url。网站正常运行的地方，以及网站崩溃的地方。

url1：页面工作 url2：页面网站崩溃

我做这样的事情

 if (localStorage.getItem("url1") == undefined && localStorage.getItem("url2") == undefined) {
      localStorage.setItem("url1", props.history.location.pathname);
      localStorage.setItem("url2", props.history.location.pathname);
    }

    if (localStorage.getItem("url1") != localStorage.getItem("url2") && localStorage.getItem("url1") != undefined && localStorage.getItem("url2") != undefined) {
      let url2: any = localStorage.getItem("url2")?.toString();
      localStorage.setItem("url1", url2);
      localStorage.setItem("url2", props.history.location.pathname);
    }

    if (localStorage.getItem("url1") == localStorage.getItem("url2") && localStorage.getItem("url1") != undefined && localStorage.getItem("url2") != undefined) {
      localStorage.setItem("url2", props.history.location.pathname);
    }

这样，每当网站被重定向到 404 时。我只需在按钮中使用以下代码，该代码应该将用户带回 DID 工作的页面。

pushBackError = () => {
    const { history } = this.props;
    this.setState({hasError: false})
    let url : any = localStorage.getItem("url1")?.toString();
    history.push(url)
  }

这样我就可以很好地从错误中恢复。那么那里的问题是什么？

我有一个导航标题，它有一个后退按钮，并且在每个页面中都可用（错误页面除外）。暗示如果我有以下流程

page1（包含一个history.goBack按钮）-> page2（崩溃）-> errorpage（我单击返回按钮并使用pushBackError（）返回到page1）-> page1（我单击触发history.goBack的后退按钮）->由于历史堆栈已填满，因此将我返回到 errorPage。

我怎么能避免这种情况？理想的流量是

page1 -> page2（崩溃）-> errorPage -> page1（我单击返回）-> 转到 page1 之前的页面，就好像导致 page2 崩溃的导航从未发生过一样。

标签： javascriptreactjsreact-router-dom