Prólogo:
cuando se trabaja en un proyecto recientemente, si el usuario no guarda el formulario al regresar, es necesario interceptar el salto de enrutamiento y enviar un mensaje de aviso para salir. Creo que los amigos que han hecho el proyecto vue no son ajenos a la guardia de enrutamiento de vue.¿Cómo realizarlo en reaccionar? (Este intercambio es para la versión v5 de react-router)
1. Use el componente Prompt para completar
No cotillees y ve directamente a los productos secos. El paquete de enrutador de reacción nos proporciona un componente para ayudarnos a completar la protección de enrutamiento. Tiene dos parámetros cuando y mensaje.
Dado que la ventana emergente predeterminada es muy fea, debe usar antd o meet-react para embellecer el marco emergente. A partir de los valores de la tabla anterior, podemos ver que cuando el valor de when es verdadero y el valor de retorno de la función de mensaje es falso, la ruta será interceptada y el cuadro emergente predeterminado no aparecerá. No hay mucho que decir, directamente en el código de ejemplo:
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>
);
}
2. Usa history.block para interceptar
Al observar el valor de retorno, no es difícil encontrar que cuando el valor de retorno del bloque es falso, el salto de enrutamiento se puede interceptar y el cuadro de aviso predeterminado no aparecerá.
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>
);
}