react路由传参(4种方式)
1、通过params传参(刷新页面后参数不消失,参数会在地址栏显示)
路由页面:
<Route path='/demo/:id' component={Demo}></Route> //注意要配置 /:id
路由跳转并传递参数:
链接方式:
<Link to={'/demo/'+'6'}>XX</Link> //或: <Link to={{pathname:'/demo/'+'6'}}>XX</Link>
js方式:
this.props.history.push('/demo/'+'6') //或: this.props.history.push({pathname:'/demo/'+'6'})
获取参数:
this.props.match.params.id //注意这里是match而非history
params传参(多个动态参数)
state={ id:88, name:'Jack', }
路由页面:
<Route path='/demo/:id/:name' component={Demo}></Route>
路由跳转并传递参数:
链接方式:
<Link to={{pathname:`/demo/${this.state.id}/${this.state.name}`}}>XX</Link>
js方式:
this.props.history.push({pathname:`/demo/${this.state.id}/${this.state.name}`})
获取参数:
this.props.match.params //结果 {id: "88", name: "Jack"}
2、通过query传参(刷新页面后参数消失)
路由页面:
<Route path='/demo' component={Demo}></Route> //无需配置
路由跳转并传递参数:
链接方式:
<Link to={{pathname:'/demo',query:{id:22,name:'dahuang'}}}>XX</Link>
js方式:
this.props.history.push({pathname:'/demo',query:{id:22,name:'dahuang'}})
获取参数:
this.props.location.query.name
优势:传参优雅,传递参数可传对象;
缺点:刷新地址栏,参数丢失
3、通过state传参( 刷新页面后参数不消失,state传的参数是加密的,比query传参好用)
路由页面:
<Route path='/demo' component={Demo}></Route> //无需配置
路由跳转并传递参数:
链接方式:
<Link to={{pathname:'/demo',state:{id:12,name:'dahuang'}}}>XX</Link>
js方式:
this.props.history.push({pathname:'/demo',state:{id:12,name:'dahuang'}})
获取参数:
this.props.location.state.name
优缺点同query
4、通过search
路由页面:
<Route path='/web/departManange ' component={DepartManange}/>
路由跳转并传递参数:
链接方式:
<link to="web/departManange?tenantId=12121212">xxx</Link>
js方式:
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
读取参数用:
this.props.location.search
优缺点同params
以上就是react怎么路由传参?的详细内容,更多请关注0133技术站其它相关文章!