umi中其他页面跳转到有keep-alive功能页面的跳转参数问题
需求
从A页面跳转到B页面,跳转时将A页面中的C数据带到B页面中,在B页面中显示
环境
"umi": "3.5.17"
"react": "^16.13.0"
页面菜单栏展示大致如下:
开发中的问题
(1)页面刷新后路径参数被清除
解决方法:
不采取用路径参数的方式将数据传递给B页面,改用session 或 localStorage 保存数据,在B页面使用完数据后清除对应缓存
(2)B页面执行函数的顺序有冲突
问题描述:页面tag被点击关闭后,因为页面设置了keep-alive,因此页面不会被销毁。如果点击了B页面后关闭B页面,再从A页面进入B页面。B页面会先执行页面销毁函数,在重新执行初始化函数
import useShallowEqualSelector from '@/hooks/useShallowEqualSelector';
import { useEffect } from 'react';
const BPage = (props: any) => {
const { count } = useShallowEqualSelector(({ user }) => ({
count: user?.count,
}));
useEffect(() => {
console.log('useEffect==页面初始化====');
return () => {
console.log('页面被销毁了');
};
}, []);
useEffect(() => {
console.log('监听======');
}, [count]);
return <div>111111</div>;
};
export default BPage;
解决方法:
(1)新增window变量window.APage 和 session 或 localStorage缓存
(2)A页面跳转前,设置window.APage = true。说明是从A页面进入B页面。在设置两个数据B1(缓存数据)、B2(路由跳转参数),监听函数使用B1数据,初始化时使用B2数据。B1 和 B2 数据是完全一样的
(3)监听函数 或者 初始化函数执行时,使用完缓存数据后,就清除对应的缓存数据
//A页面跳转逻辑:
function (){
// 处理B1数据
const newParams = { ...getSessionData('B1') };
const filterData = { data: 'xxx' };
yield setSessionData('B1', {
...newParams,
filterData: JSON.stringify(filterData),
});
// 更改redux数据,触发监听
yield put({ type: 'countChange', payload: [activeKey] });
if (activeKey === 'equ_efficiency') {
window.APage = true;
// 处理B2数据,跳转带参数
PageUtil.goPage(historyPath, {
B2: JSON.stringify(filterData),
});
} else {
PageUtil.goPage(historyPath);
}
}
// B页面:
import useShallowEqualSelector from '@/hooks/useShallowEqualSelector';
import { useEffect, useState } from 'react';
const BPage = (props: any) => {
const [inited, setInited] = useState(false);
const { count } = useShallowEqualSelector(({ user }) => ({
count: user?.count,
}));
const getPARAMS = () => {};
useEffect(() => {
if (!inited) {
setInited(true);
}
const urlParams = props?.location?.state?.B2;
if (!!window.APage) {
if (!!urlParams) {
const filterData = JSON.parse(urlParams);
getPARAMS(filterData);
}
window.APage = false;
}
}, []);
useEffect(() => {
if (!inited) {
return;
}
getPARAMS();
}, [count]);
return <div>13232</div>;
};
export default BPage;