javascript - 如何使用 history.goBack 关闭弹出窗口以及如何在通过直接链接打开后关闭弹出窗口

Question

我正在使用 react-router 在新的 URL 地址中打开弹出窗口。它看起来像这样：

<Route path="/some-url/popup" children={({ match }) => (
  <Dialog onClose={history.goBack} open={Boolean(match)}>
    <PopupContent />
  </Dialog>
)} />

如您所见，我想通过 history.goBack 清除打开和关闭弹出窗口的浏览器历史记录。但是有一种情况是，用户通过指向此弹出窗口的直接链接打开网站，然后用户无法关闭弹出窗口以继续使用该网站，因为之前的路线不是来自我们的网站。结果，用户在按下关闭弹出按钮后会从我们的网站重定向到上一个路线，但我们希望用户留在我们的网站上。

我为您创建了一个小演示，以便更好地理解https://sin9k.com/popups-routes/posts

您可以打开此网站，例如单击“注册”按钮，然后关闭弹出窗口，您将看到您仍在该网站上。但是，如果您复制弹出窗口的链接并将其粘贴到浏览器的新选项卡中，您将在关闭弹出窗口后将网站返回到空选项卡。

有谁知道这种情况的解决方法？

更新

经过一些研究，我用演示和 GitHub 为这个问题创建了一些视频答案。

CN: https://youtu.be/tl5_k6YBRKg

茹：https ://youtu.be/fqYk-b1lhyI

演示：https ://sin9k.com/close-popup

GitHub： https ://github.com/Sin9k/react-router-dom-tricks

标签： javascriptreactjsreact-routerpopuprouter