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

React: How to prompt for unsaved changes when navigating with react-router-component

Redux 状态保留未保存更改的标志，如果设置了此标志，我想在导航时提示用户（单击 Link）。我正在使用 react-router-component。我没有在文档中找到如何执行此操作。

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

然后，如果 'yes' 您只是继续 this.navigate(...)（从您的组件中继承自 Navigatable），那么您只需通过提示用户是否要导航离开来处理该组件上的点击事件。

任何在 2018 年达到此 post 并使用 React 路由器 4+ 的人，我建议阅读此 reacttraining example

TL;DR 使用顶部的 Prompt 组件 

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