react 订阅页面顺序问题

场景

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: [] },
      });
   }
  }, []);

本文地址：https://blog.csdn.net/JJWanna/article/details/108986806