Во многих сервисах пользователям приходится заполнять формы с большим количеством полей. И чем их больше, тем больнее терять введенные данные.
Чтобы спасти пользователя от такой досадной неудачи, обычно используют блокировку перехода и открывают модальное окно с вопросом о подтверждении намерений.
Чтобы реализовать это на стеке React, Redux, React Router 4, можно воспользоваться методом
block объекта history, который получают из компонента высшего порядка withRouter. Вызвать его нужно в методе жизненного цикла componentWillUnmount.Используя наработки из заметок про формы и модальные окна в React, мы собрали новое интерактивное демо с кодом решения:
https://codesandbox.io/s/zlp6zwkr3p
Если перейти к форме, начать ее заполнять, а затем попытаться покинуть страницу, то приложение поможет предотвратить потерю введенных данных.