场景
A页面跳转 B页面
A页面跳转C页面
B页面与C页面互跳
进入页面订阅方法Q,离开页面要销毁方法Q
B 页面 的model.js
subscriptions: {
setup({ dispatch, history }) {
console.log("B")
return history.listen(({ pathname, query }) => {
if (pathname === '/product/B') {
dispatch({
type: 'loadPageData',
payload: query,
});
console.log('B in');
} else {
dispatch({
type: 'resetState',
});
console.log('B out');
}
});
},
},
C页面的model.js
subscriptions: {
setup({ dispatch, history }) {
console.log("C")
return history.listen(({ pathname, query }) => {
if (pathname === '/product/C') {
dispatch({
type: 'loadPageData',
payload: query,
});
// dispatch({
// type: 'userVender/save',
// payload: {leftMenuSelectedKeys:['/product/A']},
// });
console.log('===C in');
} else {
dispatch({
type: 'resetState',
});
// dispatch({
// type: 'userVender/save',
// payload: {leftMenuSelectedKeys:[]},
// });
console.log('C out');
}
});
},
},
假如从A页面跳转到B 输出
B
B in
C
C out
从A 跳转C输出
B
B out
C
C in
因为listen监听同一个路由 ,路由变化先进入哪个页面 model先订阅 ,先订阅的进入栈中,每次取的时候先执行。而不会根据页面的model执行 in out
解决方法:把要执行的方法写入页面中 useEffect 根据组件加载显示销毁
useEffect(() => {
dispatch({
type: 'userVender/save',
payload: { leftMenuSelectedKeys: ['/product/A'] },
});
//每次离开时销毁,最终写到global.js中去
return () => {
dispatch({
type: 'userVender/save',
payload: { leftMenuSelectedKeys: [] },
});
}
}, []);