本篇教程介紹了JavaScript基礎教程 react router路由傳參，希望閱讀本篇文章以后大家有所收獲，幫助大家對JavaScript的理解更加深入。

<

今天，我們要討論的是react?router中Link傳值的三種表現形式。分別為通過通配符傳參、query傳參和state傳參。

ps:進入正題前，先說明一下，以下的所有內容都是在react-router?V4的版本下。

1.通配符傳參

Route定義方式：

Link組件：

通配符

參數獲取：

this.props.match.params.name

注意這個match,許多博客活文章都是忽略了它，導致取不到值。這里的this.props.match.params.name?===?‘通過通配符傳參’。

優點:簡單快捷,并且，在刷新頁面的時候，參數不會丟失。

缺點:只能傳字符串，并且，如果傳的值太多的話，url會變得長而丑陋。

如果，你想傳對象的話，可以用JSON.stringify(),想將其轉為字符串，然后另外的頁面接收后，用JSON.parse()轉回去。這里簡單提一下，不贅述。

2.query

Route定義方式：

Link組件：

var?query?=?{

pathname:?'/query',

query:?'我是通過query傳值?'

}

query

參數獲取：

this.props.location.query

這里的this.props.location.query?===?'我是通過query傳值'

優點：優雅，可傳對象

缺點：刷新頁面，參數丟失

3.state

Route定義方式：

state

Link組件：

var?state?=?{

pathname:?'/state',

state:?'我是通過state傳值'

}

參數獲取：

this.props.location.state

這里的this.props.location.state?===?'我是通過query傳值'

優點：優雅，可傳對象

缺點：刷新頁面，參數丟失

本文由職坐標整理并發布，希望對同學們有所幫助。了解更多詳情請關注職坐標WEB前端JavaScript頻道！

總結

以上是生活随笔為你收集整理的react更改路由入参_JavaScript基础教程 react router路由传参的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。