react中怎麼用link跳轉

react中用link跳轉的方式：1、透過Link跳轉攜帶隱形參數，然後使用「this.props.location.query」拿到所傳參數物件；2、透過Link跳轉攜帶顯性參數，然後使用“this.props.match.params.id”取得參數。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react中怎麼用link跳轉？

React中Link跳轉

Link跳轉攜帶隱形參數：

<Link to={{
            pathname: &#39;agent-openservice/&#39;,
            query:{
               shop_id:row.shop_id,
               merchant_id:row.merchant_id
            }
         }} />

可透過this.props.location.query拿到所傳參數物件

缺點：頁面刷新路由遺失、參數遺失

優點：可攜帶多個參數

Link跳轉攜帶顯性參數

<Link to={{pathname: &#39;agent-openservice/&#39; + shopId, }} />

掛載的路由路徑：

<Route path="agent-openservice/:id">

可透過this.props.match.params.id取得參數

優點：重新整理頁面不會遺失參數

缺點：只能傳遞一個參數

推薦學習：《react影片教學》

以上是react中怎麼用link跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！