在 React App 中阻止导航答案

【问题标题】：Blocking navigation in React App在 React App 中阻止导航
【发布时间】：2017-10-04 02:47:36
【问题描述】：

我遇到了 React 中的导航阻塞问题。

我使用 React + Redux 和 React Router。我一直在使用该组件，以防止在 React 中导航不完整的表单。只要导航实际上在 React 中，它就可以正常工作。但是，它不会阻止通过 URL 条目导航或单击外部超链接。

React 中是否有一种可接受的方法来处理外部超链接和阻止 React 之外的导航？

【问题讨论】：

您好，您是否通过 react-router 历史处理“外部超链接”？
您好！感谢您的答复。我目前正在使用的网站正在 Django 应用程序和迁移到 React 之间过渡。顶部栏（在 React 应用程序的 React 内容区域之外呈现）具有指向基于 Django 的页面的链接以及其他 React-Router 友好链接。因此，超链接并非都是很好的<Link /> 元素。我或多或少在寻找基于 React 的 window.onbeforeunload 在导航离开不完整的表单之前提示用户。

【解决方案1】：

你没有在这里提供任何代码，所以我试图猜测。如果我理解正确，您可以通过 react-router 管理 React 应用程序的内部重定向，而不会出现任何问题。

根据你的说法：

不过，它不会阻止通过 URL 条目导航或单击外部超链接。

让我们解决这两个问题。首先不能阻止用户去导航栏输入一个新的URL，这是浏览器端设计的，对用户不利，当然是侵入性的！

但是关于您的第二个问题，即单击链接会将您发送到您的域或应用程序之外，您可以采取一些措施。

这里有多种选择，我给你三个：

首先：使用history.block

您可以阻止或更好地说，要求用户使用history.block 确认转换到另一个页面

作为历史文档中的示例：

const unblock = history.block('Are you sure you want to leave this page?')

只是不要使用锚元素href，而是依赖history 的react-router。

您可以在此处阅读更多信息：react-router/history

但基本上您可以使用历史记录中的 push 方法连接重定向，如下所示：

onClick() {
    //code to control if you want to redirect or not
    history.push('http://yoururl.com');
}

然后您还有其他选择，例如使用条件渲染与重定向组件相结合，但其他方法足以解决您的问题。

【讨论】：

感谢您的回复！很抱歉，我没有正确地充实我的答案。所以，简而言之，我正在寻找的行为类似于经常被滥用的window.window.onbeforeunload()。在我的案例中，这并不是要阻止用户离开，而是要提醒我他们的表单不完整。虽然window.onbeforeunload 可以工作，但我想知道是否有更原生的 React/与 React-Router 集成的东西可以在这种情况下工作。希望那次我能更好地表达自己！
Ohhh @koonsies 根据你的问题，你说你想以某种方式阻止用户。如果是这样的话，你想在那个“提醒”中做什么样的动作？你想问用户是否想离开表单？还是您只是想在某个人离开表单而不输入某些字段的地方登录？
因为如果是这样，现在你还有其他选择
顺便说一句，您知道在所有浏览器中使用onbeforeunload 并不安全，因为在大多数浏览器中，如果您在那里触发消息，它将不会被加载
是的！ “您的更改可能无法保存”的默认消息很好。这只是为了防止他们在更改表单后意外导航/清除表单。

【解决方案2】：

我认为您正在寻找 React Router 的历史 API 下的阻塞转换。

根据反应路由器历史 github 页面上的示例：

您可以注册一条简单的提示消息，在用户离开当前页面之前，该提示消息将显示给用户。

const unblock = history.block('Are you sure you want to leave this page?')

【讨论】：