Ant Design Pro路由传值

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 },
      },

的方法取出路由中的参数，然后调用一下接口即可。