react路由拦截（路由守卫）

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

一、使用Prompt组件来完成

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

参数名称	类型	作用
when	boolean	true 弹窗 false顺利跳转
message	function或者字符串	函数返回true就顺利跳转，false停止跳转字符串就弹窗字符串并停止跳转。

when值	message值	路由是否跳转	是否弹出默认框
false	无论message是函数返回任何值还是message是字符串后边结果都一样	是	否
true	message是字符串	否	是
true	message是函数返回值true	是	否
true	message是函数返回值是字符串	否	是
true	message是函数返回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>);
}

react路由拦截（路由守卫）相关推荐

路由导航守卫/路由拦截/导航守卫
导航守卫: 又称:路由导航守卫.路由拦截都是一样的分为全局守卫.组件守卫.独享守卫全局守卫写在路由页面,写在const router同级之下 const router = new VueRout ...
2022-11-15 vue笔记-路由vue-router(四) 路由守卫(又称路由拦截,导航守卫)的定义以及示例
文章目录 0.路由的概念 1.路由守卫的定义定义官方解释路由守卫的分类钩子函数 2.路由守卫的使用场景 3.语法:`router.beforeEach((to,from,next) => ...
react登录页面_React 实现路由拦截
接到个新项目,使用的是React,由于React没有属于自己的路由拦截方法,只有自己封装Route成高阶组件来实现,现记录下实现的方式: 首先创建一个router文件,引入项目需要展示的组件 . ex ...
react离开页面，自定义弹框拦截，路由拦截
前言: 项目有个需求是:跳转路由,在离开页面前,需要弹框询问用户是否确定离开. 用react-router的<Prompt>组件是可以的,但是,怎么使用antd组件(或者说自定义组件)呢? ...
路由导航守卫和路由拦截
1.如果用户没有登录,但是直接通过URL访问特定网页,需要重新导航到登录页面 router.beforeEach(( to, from , next ) => { //如果用户访问的登录页,直接 ...
全局前置守卫--路由拦截
/ 全局前置守卫 ---> 进行路由拦截 router.beforeEach( (to, from, next) => { if(to.path == "/login" ...
路由守卫 /路由拦截
1. 在访问一个页面的时候也就是在进行路由跳转的时候,把这个跳转拦下来做一些判断或者操作然后来执行是继续访问这个页面还是执行别的操作路由的导航守卫又叫路由的生命周期函数也叫路由的钩子函数 ...
前后端分离，如何解决跨域（代理模式）、路由拦截（进入页面需要登录）以及请求拦截（登录TOKEN失效）等问题（初学者）
前端时间项目需要发布一个较大的版本,工作比较忙,加了好多个晚上的班,感觉自己有点缺氧了.最近稍微闲下来了,顺便调休了三天,刚刚给家里来了个大扫除,看着这干干净净的小家,心里顿时舒服了很多. 下面进入正 ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...

react路由拦截（路由守卫）

一、使用Prompt组件来完成

二、使用history.block拦截

react路由拦截（路由守卫）相关推荐

最新文章

热门文章