Reactjs 单击取消按钮时显示提示react router v4

我知道我可以使用下面的代码片段来防止用户导航到另一个选项卡，而不提醒他们可能会丢失输入的数据

import { Prompt } from 'react-router'

const MyComponent = () => [
    <Prompt
      key='block-nav'
      when={shouldBlockNavigation}
      message='Any cool message here'
    />
]

从'react router'导入{Prompt}
常量MyComponent=（）=>[
]

---

我的页面中有一个“取消”按钮，因此我希望在单击此按钮后显示相同的提示，有人知道我如何执行此操作吗？

类似的操作应该可以正常工作

   <Prompt
     key='block-nav'
     when={this.state.shouldBlockNavigation}
     message='Any cool message here'
  />
  <button onClick={(e) => {
      e.preventDefault();
      this.setState({shouldBlockNavigation:true})
     }}>
   CANCEL
 </button>

{
e、 预防默认值（）；
this.setState（{shouldBlockNavigation:true}）
}}>
取消

因此，每当其when值为true且页面被导航时，就会触发提示

    <Prompt
      key='block-nav'
      when={this.state.shouldBlockNavigation}
      message='Any cool message here'
    />

---

按钮代码：

<button
  onClick={ () => {
    this.setState({shouldBlockNavigation:true});
    window.history.back();
  }
>
Cancel
</button>

{
this.setState（{shouldBlockNavigation:true}）；
window.history.back（）；
}
>
取消

因此，每当有人单击“取消”按钮时，我们都会设置when属性的值，并强制进行导航

---

希望这有帮助。

此解决方案效果良好。问题是，如果用户决定丢失更改，我不想转到其他选项卡。由于

window.history.back（），它将我带到上次访问的页面

您知道是否有其他替代方法或方法可以停留在同一页面上吗？

react router

提示符

只能在找到页面导航时触发，但如果您希望在不更改页面的情况下显示提示符，则可以使用

确认

。因此，在单击按钮invoke

confirm（‘这里有任何很酷的消息’）

是的，我决定使用这种方法。谢谢阿尤西亚。