react路由拦截(路由守卫)

发布时间:2023-12-24 13:30

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

一、使用Prompt组件来完成

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

参数名称类型作用
whenbooleantrue 弹窗
false顺利跳转
messagefunction或者字符串函数返回true就顺利跳转,false停止跳转
字符串就弹窗字符串并停止跳转。
when值message值路由是否跳转是否弹出默认框
false无论message是函数返回任何值还是message是字符串后边结果都一样
truemessage是字符串
truemessage是函数返回值true
truemessage是函数返回值是字符串
truemessage是函数返回false

由于默认弹窗非常不好看,所以,要借助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返回值路由是否跳转是否弹出默认框
true
false
string

通过观察返回值不难发现当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>
  );
}

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号