zoukankan      html  css  js  c++  java
  • React跳转路由传参3种方法和区别

    1、params传参
    路由表配置:参数地址栏显示
    路由页面:<Route path='/demo/:id' component={Demo}></Route> //配置 /:id
    路由跳转并传递参数:
    链接方式:<Link to={'/demo/' + '2'}>XX</Link>
    js方式:this.props.history.push('/demo/' + '2')
    获取参数:this.props.match.params.id


    2、query传参
    query方法:参数地址栏不显示,刷新地址栏,参数丢失
    路由页面:<Route path='/demo' component={Demo}></Route> //无需配置
    路由跳转并传递参数:
    链接方式:<Link to={{path:'/demo',query:{name:'dahuang'}}}>XX</Link>
    js方式:this.props.history.push({pathname:'/demo',query:{name:'dahuang'}})
    获取参数: this.props.location.query.name


    3、state传参( 同query差不多,只是属性不一样,而且state传的参数是加密的)
    state方法:参数地址栏不显示,刷新地址栏,参数不丢失
    路由页面:<Route path='/demo' component={Demo}></Route> //无需配置
    路由跳转并传递参数:
    链接方式: <Link to={{path:'/demo',state:{name:'dahuang'}}}>XX</Link>
    js方式:this.props.history.push({pathname:'/demo',state:{name:'dahuang'}})
    获取参数: this.props.location.state.name

  • 相关阅读:
    mysql 索引
    mysql binlog相关知识
    分布式系统日志
    学习路线
    分布式学习
    工具
    关于java面试
    mysql悲观锁总结和实践(转)
    app技术博客整理
    Java编程一些经验
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/14098491.html
Copyright © 2011-2022 走看看