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

  • 相关阅读:
    CF1540B Tree Array
    CF1539F Strange Array
    CF526F Pudding Monsters
    怎样用 VS 2017 编译 cpprestsdk 库
    【转】C语言中常见的内存错误与解决方法
    vs2019 windbg方式远程调试应层程序
    关于 类似QQ 长截图的方案
    AIX小型机
    vSphere
    Git的使用
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/14098491.html
Copyright © 2011-2022 走看看