react路由传参(3种方式)
<h4 id="1params传参刷新页面后参数不消失参数会在地址栏显示">1、params传参(刷新页面后参数不消失，参数会在地址栏显示)</h4><pre><code>路由页面：<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
</code></pre>
<h4 id="1params传参多个动态参数">1、params传参(多个动态参数)</h4>
<pre><code>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"}
</code></pre>
<h4 id="2query传参刷新页面后参数消失">2、query传参(刷新页面后参数消失)</h4>
<pre><code>路由页面：<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
</code></pre>
<h4 id="3state传参-刷新页面后参数不消失state传的参数是加密的比query传参好用">3、state传参( 刷新页面后参数不消失，state传的参数是加密的，比query传参好用)</h4>
<p>注：state 传参的方式只支持Browserrouter路由，不支持hashrouter</p>
<pre><code>路由页面：<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
</code></pre><br><br>
来源：https://www.cnblogs.com/huihuihero/p/12165344.html
頁:
[1]