React跳转路由传参3种方法和区别

时间：2022-06-17 18:10:08

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传的参数是加密的，query传的参数是公开的，在地址栏)

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

相关文章