React 路由傳參的三種方式

一、params傳參

  • 刷新頁面后參數不消失
  • 參數會在地址欄顯示
  • 需要在Route中配置參數名稱

1、params傳遞單個參數

路由頁面

<Route path="/production/:productionId" component={production} />
  • 使用Link傳參
<Link to={‘/production/’ + '105'}>跳轉</Link>

或者

<Link to={{pathname: '/production/' + '105'}}>跳轉</Link>
  • 使用js傳參
this.props.history.push('/production/'+'105');

或者

this.props.history.push({pathname:'/production/'+'6'});

獲取參數

this.props.match.params.productionId

2、params傳遞多個參數

路由頁面

<Route path='/production/:productionId/:productionType' component={production}></Route>

state = {
     productionId: 120,
     productionType: 'fruits'
 }
  • 使用Link傳參
<Link to={{pathname:`/production/${this.state.productionId}/${this.state.productionType}`}}>跳轉</Link>
  • 使用js傳參
this.props.history.push({pathname:`/demo/${this.state.productionId}/${this.state.productionType}`});

獲取參數

this.props.match.params

二、query傳參

  • 刷新頁面后參數消失
  • 參數不會在地址欄顯示

路由頁面（無需配置）

<Route path='/production' component={production}></Route>
  • 使用Link傳參
<Link to={{pathname:'/production',query:{productionId:120,productionType:'fruits'}}}>跳轉</Link>
  • 使用js傳參
this.props.history.push({pathname:'/production',query:{productionId:120,productionType:'fruits'}});

獲取參數

this.props.location.query

三、state傳參

  • 刷新頁面后參數不消失
  • 參數不會在地址欄顯示

路由頁面（無需配置）

<Route path='/production' component={production}></Route>
  • 使用Link傳參
<Link to={{pathname:'/production',state:{productionId:12,productionType:'fruits'}}}>跳轉</Link>
  • 使用js傳參
this.props.history.push({pathname:'/production',state:{productionId:12,productionType:'fruits'}});

獲取參數

this.props.location.state

如果覺得本文對您有幫助的小伙伴可以積極留言或者點贊！??????

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容