React：使用 react-router-component 导航时如何提示未保存的更改

Posted 2023-02-22

【中文标题】React：使用 react-router-component 导航时如何提示未保存的更改

【英文标题】：React: How to prompt for unsaved changes when navigating with react-router-component

【发布时间】：2016-11-24 21:51:57

【问题描述】：

Redux 状态保存未保存更改的标志，如果设置了此标志，我想在导航（单击链接）时提示用户。我正在使用react-router-component。我没有在文档中找到如何做到这一点。

【参考方案1】：

任何在 2018 年看到这篇文章并使用 react 路由器 4+ 的人，我建议阅读这个reacttraining example

TL;DR 在顶部使用Prompt 组件

<Prompt
    when=hasUnsavedChanges
    message="There are unsaved changes, do you wish to discard them?"
/>

【讨论】：

您能否解释一下这实际上是如何工作的，或者在您的答案中包含更完整的代码示例？

【参考方案2】：

您应该能够简单地创建自己的 Link 组件（继承自 Router.NavigatableMixin，例如此处为 https://github.com/STRML/react-router-component/issues/105#issuecomment-63874805 和此处为 http://strml.viewdocs.io/react-router-component/recipes/custom-link/）。

然后，您只需处理该组件上的点击事件，提示用户是否要导航，如果“是”，您只需继续使用 this.navigate(...)（从您的组件内部，继承自 Navigatable）。

【讨论】：

它可以正常工作，但是鼠标指针悬停状态消失了。除了编写自定义点击处理程序之外，我如何保留 Link 的原始行为？

悬停状态可能是只有 css 的东西 - 检查链接组件的样式并与你的比较。

这看起来是一个非常糟糕的解决方案，因为您可能有很多方法可以在不点击链接的情况下离开。例如。在浏览器中点击“返回”。