Итак, я хочу показать пользователям всплывающее окно, когда они пытаются покинуть страницу. Всплывающее окно будет иметь кнопки - вкл, чтобы сохранить контент и уйти, а другой просто уйти без сохранения.
Я использую router 3.2.1
Я пытался использовать routeLeaveHook functionallity , и это работает, чтобы открыть диалоговое окно.
Но проблема, с которой я сталкиваюсь сейчас, заключается в том, что я не уверен, как обрабатывать две функции, которые должны запускаться при нажатии кнопки? Должен ли я добавить sh к истории в них, чтобы перейти на нажатую страницу? Как я могу получить nextLocation там? Или я должен использовать routeLeaveHook как-то? Или есть другой способ сделать все это?
Спасибо за вашу помощь!
class MyDialog extends React.Component {
componentDidMount(): void {
const { route, routeLeaveHook} = this.props;
routeLeaveHook(route, this.routerWillLeave);
}
routerWillLeave = (nextLocation: string): any => {
if (dataToSave) {
...open dialog
}
return false;
}
render () {
<div open={isOpen}>
...some content
<button onClick={this.saveAndLeave}>
Save and leave
</button>
<button onClick={this.leave}>
Leave
</button>
</div>
}
}
ОБНОВЛЕНИЕ Прямо сейчас я думаю, что я должен переместить routerWillLeave logi c в контейнер Dialog вместо помещения его в диалог