飞冰下组件间跳转及传值

接触飞冰不久，对于页面间相互跳转及传值的问题做个梳理。

查看飞冰官网，可以看到两种方式。https://alibaba.github.io/ice/docs/developers/how-to-redirect

我们经常用到的是主动调用这种方式。
假设要从Traceability_List这个组件，跳转到TraceQRcode这个组件，并传递参数traceid

先从Traceability_List这个组件开始。

1.在该类开始引入withRouter和PropTypes

import {withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';

2.在该组件上用@withRouter注解

@withRouter
export default class Traceability_List extends Component {

}

3.声明使用的location,history等

@withRouter
export default class Traceability_List extends Component {
  static displayName = 'Traceability_List';
    static propTypes = {
        match: PropTypes.object.isRequired,
        location: PropTypes.object.isRequired,
        history: PropTypes.object.isRequired,
    };
}

4.在跳转方法中调用const {history} = this.props;
history.push({
pathname: '/sourceQRcode',
traceid:traceid
});```

handleFuMaClick= (traceid) => {
        const {history} = this.props;
        history.push({
            pathname: '/sourceQRcode',
            traceid:traceid,
        });
    };

在TraceQRcode这个组件接受参数，同理也要引用withRouter和PropTypes，并且用@withRouter注解该组件，最后用this.props.history.location.traceid获取传递的参数

1.在该类开始引入withRouter和PropTypes

import {withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';

2.在该组件上用@withRouter注解

@withRouter
export default class TraceQRcode extends Component {
}

3.声明小使用的location,history等

@withRouter
export default class TraceQRcode extends Component {
    static displayName = 'TraceQRcode';

    static propTypes = {
        match: PropTypes.object.isRequired,
        location: PropTypes.object.isRequired,
        history: PropTypes.object.isRequired,
    };

4.最重要的一步就是拿到出传递过来的参数traceid

this.props.history.location.traceid

这样，跳转及传参就完成了。

By CronaldoYang
2018.12.14