React单页应用中使用react-router-v4自定义页面离开确认弹框的方法

问题描述

项目技术栈是react+ant-design；

产品需求是在某个页面表单有信息输入或变动，用户未保存要离开该页面时，自定义提示用户提示，若是用户确认离开则跳转到新页面，不然留在当前页。

思考

在react单页应用中，须要根据用户的选择来是否跳转页面，也就是须要阻塞浏览器的页面跳转，相似标签点击后的return false效果，待到用户操做后再执行后续操做。

首先，能想到的是浏览器的window.confirm方法，在交互上彻底符合需求，那么自定义需求呢？通过查阅资料发现，目前主流浏览器都不支持该方法样式的自定义，所以放弃。

其次，就是react的方案，react中，控制页面路由的是react-router，若官方提供了这种能力即是更好的。因而，我查阅了其官方文档：react-guide.github.io/react-route…、或者reacttraining.com/react-route…、中文版segmentfault.com/a/119000001…

关键文档

因为项目中使用的是react-router-v4，因此直接查看最新的API（若是是较老版本有比较简单的实现，可参考blog.csdn.net/ISaiSai/art… ）

1、Prompt组件

import { Prompt } from 'react-router-dom';
....
render(){
  return(
      <Prompt message="肯定要离开？"  when={true}/>
  )
}
复制代码

如上代码，可使用react-router-dom的Prompt，在JSX的任意render方法中（不只仅是在router组件中）均可以使用，使用后当前页面组件离开就会给用户提示信息，默认弹框为浏览器的window.confirm弹框。

1. message: string 当用户离开当前页面时，设置的提示信息。
2. message: func 当用户离开当前页面时，设置的回掉函数，返回 true 时容许直接跳转 <Prompt message={location => ( Are you sue you want to go to ${location.pathname}? )} />
3. when: bool 经过设置必定条件要决定是否启用 Prompt，属性值为true时启用防止转换；

2、Router组件的getUserConfirmation方法

用于确认导航的函数，默认使用 window.confirm。例如，当从 /a 导航至 /b 时，会使用默认的 confirm 函数弹出一个提示，用户点击肯定后才进行导航，不然不作任何处理。须要配合 <Prompt> 一块儿使用。

const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message);
  callback(allowTransition);
}

<BrowserRouter getUserConfirmation={getConfirmation} />
复制代码

实现方案

中心思想：阻塞页面，等待用户操做后异步处理页面跳转（router变动）。

探索一：Prompt既然是组件，那么在组件内使用state变动的方式去render是否可行？

尝试以下代码：

...
<Prompt
   message = {(location)=>{
     return this.state.customPromt,
     }
   }
  />
...
复制代码

实践证实这是不行的，prompt组件的message方法被同步调用了，不能达到阻塞页面跳转的效果。

探索二：尝试async/await

既然是要异步执行，那么就能够尝试async/await的异步处理方式，同步写。刚好message也能够是一个function。因而，新的尝试代码以下：

...
handlePrompt = async () => {
	const leaveConfirm = new Promise((res, rej) => {
		confirm({
			content: 'Are you sure?',
			onOk() {
				res(true);
			},
			onCancel() {
				res(false);
			},
		});
	});

	const leave = await leaveConfirm;
	return leave ;
}
...
<Prompt message={(location) => {this.handlePrompt} />
...
复制代码

满怀期待，而后...仍是不行。仔细查阅文档发现，message方法返回的是一个字符串或者true，返回字符串则调用浏览器默认的prompt方法阻塞页面跳转，和直接使用window.prompt同效果，不符合需求；返回true则直接跳转。

message: func

Will be called with the next location and action the user is attempting to navigate to. Return a string to show a prompt to the user or true to allow the transition.

以上尝试代码，虽然添加了异步方法，也会执行异步函数，可是始终会跳转页面，经查缘由为：github.com/ReactTraini…

探索三：getUserConfirmation方法，github.com/ReactTraini…

前两种方案都失败了，那么再次阅读文档发现，getUserConfirmation方法就是提供给咱们自定义用的，默认状况下，当页面使用了prompt组件后，调用的getUserConfirmation方法是浏览器默认的window.prompt。若是须要自定义，直接覆盖便可。

简单示例代码以下：

const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message);
  callback(allowTransition);
}

<BrowserRouter getUserConfirmation={getConfirmation} />
复制代码

ps:注意该方法须要写在BrowserRouter 或 MemoryRouter 上。

那么接下来的问题，就是将自定义的或者其余UI组件融合到该方法内。 已实现的代码以下：

import { Modal } from 'antd';
...
function getConfirmation(message, callback) { // 相当重要的callback方法，能够异步执行
	if (!G.pageChangeConfirm) { // G.pageChangeConfirm为页面内的全局变量，用于数据交互与条件判断
		callback(true);
		return;
	}
	Modal.confirm({
		title: '离开该页面，表单信息将不被保留？是否肯定离开该页面？',
		content: '',
		okText: '离开',
		cancelText: '取消',
		onOk() {
			callback(true);
		},
		onCancel() {
			callback(false);
		},
	});
}

ReactDOM.render((
	<BrowserRouter
		getUserConfirmation={getConfirmation}
	>
		<App />
	</BrowserRouter>
	, document.getElementById('react-wraper')
);
...
复制代码

探索四：查看GitHub的issue，查找其余解决方案

花了半天时间，在issue中找到了这个帖子https://github.com/ReactTraining/react-router/issues/4635，感兴趣的能够看下讨论过程。其中提到了两种解决方案：

1. getUserConfirmation，相似我上方的解决方案，可运行的完整参考代码：codepen.io/pshrmn/pen/…

2. history.block，利用history的API，须要withRouter包装，传送门：github.com/ReactTraini…

探索五：阅读源码，unpkg.com/react-route…

结论：有至少2种方法能够实现prompt自定义，getUserConfirmation和history.block，若是您有更好的解决方案，期待您的反馈。

最后：以上方法页面刷新时无效，那么刷新页面怎么实现相似功能呢？