React: Как запросить несохраненные изменения при навигации с компонентом response-router

Question

Состояние Redux содержит флаг для несохраненных изменений, и я хочу, чтобы пользователь подсказывал при навигации (щелкает ссылку), если этот флаг установлен. Я использую реагирующий маршрутизатор-компонент. Я не нашел, как это сделать в документации.

Answer 1

Вы должны просто иметь возможность создавать свой собственный компонент Link (который наследуется от Router.NavigatableMixinНапример, здесь https://github.com/STRML/react-router-component/issues/105 и здесь http://strml.viewdocs.io/react-router-component/recipes/custom-link/).

Затем вы просто обрабатываете событие клика по этому компоненту, предлагая пользователю, если он хочет уйти, если "да", вы просто продолжаете this.navigate(...) (из вашего компонента, наследуя от Navigatable).

Answer 2

Любой, кто достигнет этого поста в 2018 году и использует реактивный маршрутизатор 4+, я бы посоветовал прочитать этот пример реактивного обучения

TL;DR использовать Prompt компонент наверху

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