美文网首页
React使用Link跳转传递参数

React使用Link跳转传递参数

作者: 不染事非 | 来源:发表于2019-04-19 19:11 被阅读0次

方法一

1.引入Link模块

import { Link } from 'dva/router';

2.Link标签中带上要传递的参数

<Link to={
        {
          pathname:`/要跳转的路径`,
          state:{key值:val值}
        }
      }>

3.在跳转页面接收

componentWillMount(){
    //console.log(this.props.location)//传递过来的所有参数
    console.log(this.props.location.state.key值)//val值
}

方法二

1.引入包
import {hashHistory} from ‘React-router’
2.跳转传值

    handleClick = (value) => {
        hashHistory.push({
            pathname: 'message/detailMessage',
            query: {
                title:value.title,
                time:value.time,
                text:value.text
            },
        })
    }

3.接收值

console.info(this.props.location.query.title)
console.info(this.props.location.query.time)
console.info(this.props.location.query.text)

4.如果使用的ant design,可以在model里面获取结果,当然也可以在组件里面获取结果

组件页面获取结果的写法为:

import {hashHistory} from 'react-router';

hashHistory.listen(location => {
          //获取传递的数据,对象、值....    
            console.log(location.query);
          // 获取路径
        console.log(location.pathname);
    }
})

相关文章

网友评论

      本文标题:React使用Link跳转传递参数

      本文链接:https://www.haomeiwen.com/subject/apicgqtx.html