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

Question

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

Answer 1

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

TL;DR 使用Prompt顶部的组件

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

Answer 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）。