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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM