Javascript 阻止React应用程序中的导航

我在React中遇到导航阻塞问题

我使用React+Redux和React路由器。我一直在使用该组件，以防止在React中导航不完整的表单。只要导航实际上在React内，这就可以正常工作。然而，它没有阻止的是通过URL条目进行导航，或者单击外部超链接

---

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

我认为您正在寻找React路由器的历史api下的阻止转换

根据react router history github页面上的示例：

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

const unblock=history.block（'确定要离开此页吗？'）

---

详细信息在

您在这里没有提供任何代码，因此我正在尝试猜测。如果我理解正确，您可以通过React路由器管理React应用程序的内部重定向，而不会出现任何问题

根据你的陈述：

然而，它没有阻止的是通过URL条目进行导航，或者单击外部超链接

让我们解决这两个问题。首先，不能阻止用户进入导航栏并输入一个新的URL，这是由浏览器端的设计完成的，这对用户来说是不好的，当然是入侵性的

但是关于你的第二个问题，关于点击一个链接将把你发送到你的域或应用程序之外，你可以做些什么

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

第一：使用history.block 您可以阻止或更好地说，请用户使用

作为历史记录文档中的一个示例：

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

第二：使用history.push而不是href 只是不要使用锚元素

href

，而是依赖

react router

的

历史记录

您可以在此处阅读更多信息：

但基本上，您可以使用history中的push方法连接重定向，该方法类似于：

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

第三：将重定向组件与条件呈现一起使用
还有其他选项，例如使用条件渲染和重定向组件，但其他方法足以解决您的问题。
Hi，您是否通过react路由器历史处理“外部超链接”？您好！谢谢你的回复。我目前正在使用的网站正处于Django应用程序和React应用程序之间的过渡阶段。顶部栏（在React应用程序的React内容区域之外呈现）具有指向基于Django的页面的链接以及其他React路由器友好链接。因此，超链接并不都是好的
元素。我或多或少在寻找一个基于React的
窗口。onbeforeunload
在用户离开不完整表单之前提示用户。感谢您的回复！很抱歉，我没有恰当地充实我的答案。因此，简而言之，我正在寻找的行为类似于经常被滥用的，
window.window.onbeforeunload（）
。在我的情况下，这不是阻止用户离开，而是提醒我他们的表单不完整。虽然
window.onbeforeunload
可以工作，但我想知道在这个实例中，是否有更适合React/与React路由器集成的本地设备可以工作。希望那一次我能更好地表达自己！Ohhh@koonsies根据您的问题，您表示希望以某种方式阻止该用户。如果是这样的话，您希望在“提醒”中执行哪种操作？是否要询问用户是否要离开表单？或者你只是想在某人离开表单的某个地方登录，而不输入一些字段？因为如果是这样，现在你有了其他选择顺便说一句，你知道在所有浏览器中使用
onbeforeuload
并不安全，因为在大多数浏览器中，如果你在那里触发消息，它将不会被加载是的！默认消息“您的更改可能无法保存”可以。这只是为了防止在他们更改表单后意外导航/表单清除。