react更改路由入参_react路由传参(3种方式)

1、params传参(刷新页面后参数不消失，参数会在地址栏显示)

路由页面： //注意要配置 /:id

路由跳转并传递参数：

链接方式：XX

或：XX

js方式：this.props.history.push('/demo/'+'6')

或：this.props.history.push({pathname:'/demo/'+'6'})

获取参数：this.props.match.params.id //注意这里是match而非history

1、params传参(多个动态参数)

state={

id:88,

name:'Jack',

}

路由页面：

路由跳转并传递参数：

链接方式：XX

js方式：this.props.history.push({pathname:`/demo/${this.state.id}/${this.state.name}`})

获取参数：this.props.match.params //结果 {id: "88", name: "Jack"}

2、query传参(刷新页面后参数消失)

路由页面： //无需配置

路由跳转并传递参数：

链接方式：XX

js方式：this.props.history.push({pathname:'/demo',query:{id:22,name:'dahuang'}})

获取参数： this.props.location.query.name

3、state传参( 刷新页面后参数不消失，state传的参数是加密的，比query传参好用)

注：state 传参的方式只支持Browserrouter路由，不支持hashrouter

路由页面： //无需配置

路由跳转并传递参数：

链接方式： XX

js方式：this.props.history.push({pathname:'/demo',state:{id:12,name:'dahuang'}})

获取参数： this.props.location.state.name