时间戳

首页 > 解决方案 > 阻止用户在离开后返回 React 应用程序

javascript - 阻止用户在离开后返回 React 应用程序

问题描述

我有一个非常简单的React应用程序：

https://stackblitz.com/edit/react-testing-routes-navigate-outside-g7ejr5

我有 3 个反应页面：{ Page1、、 }Page2和Page31 个 html 页面：{ external.html}。

我想以下列方式流动：

Page1→ Page2→ Page3→external.html

具有特殊性的是，一旦用户离开Page3并到达，external.html他就根本无法返回React应用程序。

请记住，我无法控制：（external.html第 3 方网站）。

有没有办法在离开时完全禁用后退按钮和/或历史记录Page3？

如果您对此有任何方法，请随时 fork 上面的项目并将新链接粘贴到此处。

谢谢！

标签： javascripthtmlreactjsreact-router-dom

解决方案

有不同的方法可以处理这个问题——

在你的里面page3.jsx -> goToLink

  1. 您可以使用window.location.replace('external.html') 但这只会阻止用户返回 page3，它仍然允许返回 page2，依此类推。
  2. 您可以打开external.htmlusing window.open('external.html')，但在这种情况下，您需要想办法以某种方式关闭当前选项卡。您可以尝试使用window.close()，但这通常会给出此错误/警告Scripts may close only the windows that were opened by them.

推荐阅读