MENU

React class组件的三种路由传参方式

April 2, 2021 • Read: 1452 • C/C++阅读设置

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 传参

路由页面:<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 传的参数是公开的,在地址栏)

路由页面:<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