Javascript React Router 4--侦听路由操作并以编程方式继续/停止路由

这是我的设想：

• 我有一个用户表单，其中用户输入详细信息
• 我想在用户试图离开当前页面时创建一条确认消息，即“嘿，你有未保存的更改”
• 我的组件是由我的路由指定的组件，因此它可以访问匹配、位置、路由和历史记录
• 我知道历史的倾听和封锁功能，但我们如何实现这一点？我们可以在生命周期中的某个地方调用这些函数吗？或者你们有其他想法来实现这一点吗

参考资料：

我的问题:

• 当用户离开当前页面/路由时，如何收听路由器？（你明白了）

• 以编程方式允许用户继续或不继续

---

react路由器中有一个特定的组件专门用于该特定目的：

引用自述：

用于在导航离开页面之前提示用户。当你的 应用程序进入一种状态，应防止用户 导航离开（就像一张表格填了一半），呈现一个

有when和message道具。当用户尝试导航离开并且设置为true时，将显示提示。因此，您可以让一个函数根据需要将某个bool变量设置为true/false，并将其作为道具传递给

例如：

//your component where you get user input

state = {
    name: "",
};

render() {
    return (
      <div>
        <div>
          <Prompt
            when={!!this.state.name} /* triggers the display of prompt */ 
                                  /*(checks if this.state.name is set)*/
            message={location => `You have unsaved changes. Are you sure you want to go to ${location.pathname}?`}
          />
          <div>Nice looking profile! What's your name?</div>
          <input value={this.state.name} onChange={e => this.setState({ name: e.target.value })} />
        </div>
      </div>
    );
  }

//获取用户输入的组件
状态={
姓名：“，
};
render（）{
返回(
`您有未保存的更改。是否确实要转到${location.pathname}？`}
/>
好看的个人资料！你叫什么名字？
this.setState（{name:e.target.value}）}/>
);
}

（不是我的）

查找教程

---

检查此处的

文档：

…您尝试了什么？添加代码片段。如果您碰巧使用了“redux”，请编写一个中间件。感谢您写得好的答案！我没有从文档中注意到这一点，不过如果我们能够呈现一个自定义组件并生成一个返回true/false的算法，那就太酷了。