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