react路由拦截（路由守卫）

前言： 最近在做项目时候，遇到了返回时候如果用户没有保存表单，需要拦截路由跳转，并给出提示信息是否要退出。相信做过vue项目的小伙伴都对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>);}

二、使用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>);}