react路由傳參(3種方式)

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

1、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傳參好用)

注：state 傳參的方式只支持Browserrouter路由，不支持hashrouter

路由頁面：<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