react 路由传参(3 种方式)

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

路由页面:

<Route path="/link/:id" component={Demo}></Route> //注意要配置/:id路由跳转并传递参数。

链接方式:

<Link to={'/link/'+'xxx'}>首页</Link>
//或
<Link to={{pathname:'/link/'+'xxx'}}>首页</Link>

js 方式:

this.props.history.push(/link/"+'xxx')
//或
this.props.history.push({pathname:'/link/+'xxx'})

获取参数:

this.props.match.params.id //注意这里是match而非history

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

路由页面:

<Route path="/demo" component={Demo}></Route> //无需配置路由跳转并传递参数

链接方式:

<Link to={{pathname: '/link ",query:{ id:22, name:'dahuang"}}}>XX</Link>

js 方式:

this.props.history.push({ pathname: '/demo', query: { id: 22, namer: 'dahuang' } })

获取参数:

this.props.location.query.name

3.state 传参(刷新页面后参数不消失，state 传的参数是加密的)

路由页面:

<Route path="/link" component={Demo}></Route> //无需配置路由跳转并传递参数

链接方式:

<Link to={{pathname:'/link",state:{id:12,name:'dahuang'}}}>XX</Link>

js 方式:

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

获取参数:

this.props.location.state.name