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

      },

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

巴特西

Ant Design Pro路由传值

Ant Design Pro 路由传值

最新文章

热门文章