Реагировать - сохранить работу, прежде чем покинуть страницу

Question

С помощью реакции я пытаюсь не дать пользователю покинуть определенную страницу с сообщением и сохранить его работу. Я знаю, что мог бы использовать Prompt для отображения стандартного сообщения с кнопками ok / cancel, например:

import { Prompt } from 'react-router'

<Prompt
  when={hasToBlockNavigation}
  message="Do you want to leave without saving?"
/>

но я ищу способ отобразить пользовательский компонент вместо стандартных окон и связать пользовательские функции для кнопки ok / cancel. Я нашел другое решение, использующее функцию setRouteLeaveHook, но оно больше не поддерживается.

Есть предложения?

Спасибо.

Answer 1

Я полагаю, что вы можете использовать «response-router-navigation-prompt», что соответствует их документу: -

Предлагает пользователю подтвердить навигацию. Запасной компонент для реагирующего маршрутизатора. Позволяет более гибкие диалоги.

npm i react-router-navigation-prompt

, а затем используйте свой компонент owm, как показано ниже - я использую их пример.

import NavigationPrompt from 'react-router-navigation-prompt';


import ConfirmNavigationModal from './your-own-code';

<NavigationPrompt when={this.state.shouldConfirmNavigation}>
  {({onConfirm, onCancel}) => (
    <ConfirmNavigationModal when={true} onCancel={onCancel} onConfirm={onConfirm}/>
  )}
</NavigationPrompt>