Question

使用react，我试图阻止用户离开显示消息的特定页面并保存他的工作。我知道我可以使用提示来显示带有确定/取消按钮的标准消息，如下所示：

import { Prompt } from 'react-router'

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

但我正在寻找一种方法来显示自定义组件而不是标准窗口，并将自定义函数与ok / cancel按钮相关联。我使用setRouteLeaveHook函数找到了一些其他解决方案，但它不再受支持了。

有什么建议吗？

谢谢。

Answer 1

我相信你可以使用＆＃34; react-router-navigation-prompt＆＃34;这是根据他们的文件： -

提示用户确认导航。反应路由器的替换组件。允许更灵活的对话框。

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>

React - 在离开页面之前保存工作

1 个答案: