Ant Design Pro 路由傳值

了解Ant Design Pro組件間通訊原理的小伙伴肯定都知道，兩個頁面之間可以通過Models進行傳值，在以往的傳值過程中，我都是直接將需要的值直接一股腦的傳給兩一個界面：

  // 修改影像
  handelUpdate = obj => {
    const { dispatch } = this.props;
    dispatch({
      type: 'video/editDetail',
      payload: {
        id: obj.id,
        title: obj.title,
        des: obj.des,
        image: obj.image,
        video: obj.video,
        attachment: obj.attachment,
      },
    });
  };

這是數據展示列表點擊查看某一項詳情時所作的操作，可以看到，當數據流非常龐大時，這種寫法可以說非常小白了。缺點是需要當前頁面存儲了這么多值，才能直接傳到另一個界面，然而展示的時候可能不會需要這么多值，這就造成了內存的浪費，性能就會降低。

后來接觸了另一種方法：通過路由傳當前項的id，在詳情頁面調用查看詳情的接口，雖然這樣需要后端多寫一個接口，但性能會提升許多。

1、先配置路由：

          {
            path: '/cinema/arrangeMovieManagement/arrangeDetail/:arrangeId',
            name: 'arrangeDetail',
            component: './cinema/ArrangeMovieManagement/ArrangeDetail',
            hideInMenu: true,
          },

可以看到,在路由后面我加上了arrangeId。

2、路由傳值

  viewDetail = obj => {
    this.props.dispatch(
      routerRedux.push({
        pathname: `/cinema/arrangeMovieManagement/arrangeDetail/${obj.arrangeId}`,
      })
    );
  };

這里直接將選中的ID傳給路由

3、詳情頁面數據加載

  componentDidMount() {
    const {
      dispatch,
      match: {
        params: { arrangeId },
      },
    } = this.props;
    dispatch({
      type: 'arrangeMovie/apiArrangeMovieDetail',
      payload: { arrangeId },
    });
  }

可以看到，在該頁面的componentDidMount的時候調用一下接口，用

match: {
        params: { arrangeId },
      },

的方法取出路由中的參數，然后調用一下接口即可。