收款定制开发react路由拦截（路由守卫）

前言： 收款定制开发最近在做项目时候，收款定制开发遇到了返回时候如果用收款定制开发户没有保存表单，收款定制开发需要拦截路由跳转，收款定制开发并给出提示信息是否要退出。相信做过的小伙伴都对vue的路由守卫并不陌生，react中如何实现呢？（本分享是针对react-router的v5版本）

一、使用Prompt组件来完成

闲话不多说直接上干货，react-router包里边给我们提供了一个组件，来帮助我们完成。它有两个参数when和message。

由于默认弹窗非常不好看，所以，要借助antd或者meet-react来美化弹框。通过上边表格值可知，当when值是true并且message是函数返回值为false时候，才会拦截路由同时，不会弹出默认弹出框。话不多说，直接上实例代码：

import {  Dialog } from '@alifd/meet-react';import React, { useEffect, useState} from 'react';import { Prompt, useHistory } from 'react-router';import style from './index.module.scss';export default function TestPage() {  const history = useHistory();  const [notAllowJump, setNotAllowJump] = useState(true);  /**   * 路由拦截   * @param {*} location string   * @returns boolean   */  function handleRouter() {    const list = field.getValue('list');    const equal = xxxxx(); // 判断两次值是不是一样     if (equal) {    // 两次值一样，用户没改动数据，直接放行      return true;    }    Dialog.show({      centered: true,      content: '是否保存当前修改数据',      onOk() {      	// 用户需要提交，提交后要放行，先将when置为false，再提交操作        setNotAllowJump(false);        xxxxxSubmit(); // 继续提交      },      async onCancel() {      	// 用户不提交，直接放弃修改返回上一页。将when置为false再返回，注意setNotAllowJump操作是异步的。        await setNotAllowJump(false);        history.goBack();      },    });    // 用户有修改，返回false拦截跳转，同时屏蔽掉默认弹出框    return false;  }  return (    <div className={style['test-page']}>      <Prompt when={notAllowJump} message={handleRouter} />      <footer>        我是页面内容      </footer>    </div>  );}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

二、使用history.block拦截

通过观察返回值不难发现当block返回值是false时候，能够拦截路由跳转，并且不会弹出默认提示框。

import { useHistory } from 'react-router';import {  Dialog } from '@alifd/meet-react';import React, { useEffect, useState} from 'react';import style from './index.module.scss';export default function TestPage() {  const history = useHistory();    useEffect(() => {    history.block(() => {      Dialog.show({        centered: true,        content: '是否保存当前修改数据',        onOk() {          history.block(() => true); // 放开拦截提交操作，成功后在提交函数内跳出去          xxxxxSubmit();        },        async onCancel() {          history.block(() => true);          history.goBack();        },      });      // 开启路由拦截同时阻止默认弹出框      return false;    });  }, [history]);  return (    <div className={style['test-page']}>      <footer>        我是页面内容      </footer>    </div>  );}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37