技术标签： react.js react路由守卫 前端 js react javascript
前言： 最近在做项目时候，遇到了返回时候如果用户没有保存表单，需要拦截路由跳转，并给出提示信息是否要退出。相信做过vue项目的小伙伴都对vue的路由守卫并不陌生，react中如何实现呢？（本分享是针对react-router的v5版本）
闲话不多说直接上干货，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>
);
}
| 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>
);
}
文章浏览阅读1k次。添加一行，并用AJAX提交数据。 function submitForm() { var name = $("#name").val(); var description = $("#description").val(); var url = $("#url").val(); $.ajax({ url: '/admin/ops', type:_var row = btn.parentnode.parentnode; row.parentnode.removechild(row);
文章浏览阅读196次。ol：有序列表标签属性值描述type1,A,a,I,i规定列表顺序类型reversed （HTML5新加）reversed列表倒叙startnumberHTML5不支持，规定列表起始<ol type="A/a/I,i">ul：无序列表标签属性值描述typedisc，square，circle规定列表顺..._列表标签的属性
文章浏览阅读332次。[meng@localhost ffmpeg-4.3.2]$ ./configure --helpUsage: configure [options]Options: [defaults in brackets after descriptions]Help options: --help print this message --quiet Suppress showing informative output --_ffmpeg g722
文章浏览阅读2.6k次，点赞4次，收藏22次。GUI 就是图形用户界面的意思，在 Python 中使用 PyQt 可以快速搭建自己的应用，使得自己的程序看上去更加高大上，学会 GUI 编程可以使得自己的软件有可视化的结果，更方便地参加 “互联网+”或其他创新创业大赛。目 录1 安装PyQt 与QtDesigner2 添加GUI 到 PyCharm3 界面设计测试小程序1 安装PyQt 与QtDesigner如果你想用 Python 快速制作界面，可以安装 PyQt：pip install pyQt5 -ih..._pygui
文章浏览阅读999次，点赞2次，收藏6次。面向对象最初级程序设计思维：设计过程与抽象过程，（类是对象的模板与抽象，是具有相同属性和方法的一组对象的集 合，对象是类的实体，由属性与行为共同组成一个具体的实体。） 类与对象的关系：类是对象抽象，对象是类的实例化实体。 使用类图理解类的关系 面向对象三大特性应用：1、封装 ；2、继承；3、多态；是程序设计更符合人思考的方式。 封装：{维护数据安全性将属性私有化（以包机制，与private..._吃货(多实例测试)
文章浏览阅读212次。Camstar_camstar
文章浏览阅读71次。摘要：之前在项目中解决了插入字符串类型的数据，今天试着写了一个插入date类型的字段，成功了，现在记录一下，以便以后查看：一：首先建立一个根据xml节点名称获取对应的xml值的Function.sql:CREATE OR REPLACE FUNCTION MIP.GetXmlNodeValue (xmlStr CLOB, nodeName VARCHAR2) RETURN VAR..._oracle sql 触发器中对date类型的字段的处理
文章浏览阅读1.1w次，点赞7次，收藏48次。KCF简介KCF是一种鉴别式追踪方法，这类方法一般都是在追踪过程中训练一个目标检测器，使用目标检测器去检测下一帧预测位置是否是目标，然后再使用新检测结果去更新训练集进而更新目标检测器。而在训练目标检测器时一般选取目标区域为正样本，目标的周围区域为负样本，当然越靠近目标的区域为正样本的可能性越大。简单来说 KCF 是 核相关滤波算法，滤波器 和 跟踪patch 进行相乘的到相关性，对应位置较..._kcf 目标检测
文章浏览阅读4.7k次。a100mov ax,ffff；把双字长数的低字放到AX中mov dx,ffff；把双字长数的高字放到DX中test dx,8000；测试双字长数的符号jz 0113；如果是非负数，则直接保存neg dx；如果是负数，则求补neg ax；求补sbb dx,0int 3g=073f:0100 0113运行附图如下：..._汇编语言求双字长数的绝对值
文章浏览阅读222次。根据项目https://github.com/thecodemonkey86/qt_mysql_driver翻译Get precompiled qsqlmysql.dll from releases获取编译后的qsqlmysql.dll 链接不是很懂这两个有什么区别之后put qsqlmysql.dll (if release build) / qsqlmysqld.dll (if debug build, but note that when using MinGW 8.1.0 the d_qsmqldriver
文章浏览阅读1.4w次，点赞61次，收藏333次。足足准备了长达3个月的面试，终于在上周拿到了阿里的offer！博主汇总整理了一份我面试之前看的一些Java面试题目，可以说是非常详细！分享给大家，希望对正在面试Java岗位的朋友有帮助哈~~（文末附参考答案）Java基础相关面试题目：JDK 和 JRE 有什么区别？ == 和 equals 的区别是什么？ 两个对象的 hashCode()相同，则 equals()也一定为 true，对吗？ final 在 java 中有什么作用？ java 中的 Math.round(-1.5)
文章浏览阅读2k次。一.什么是ip-sanip-san也就是SAN(全称Storage Area Network，存储局域网络)，它的诞生，使存储空间得到更加充分的利用，并使得安装和管理更加有效。SAN是一种将存储设备、连接设备和接口集成在一个高速网络中的技术。SAN本身就是一个存储网络，承担了数据存储任务，SAN网络与LAN业务网络相隔离，存储数据流不会占用业务网络带宽。在SAN网络中，所有的数据传输在高速、..._ipsan搭建