React路由傳參

2021-10-03 04:57:49 字數 1030 閱讀 9933

當我們要進行跳轉的時候,通常會把一些引數傳到另乙個元件上去,以便跳轉到的元件可以輕而易舉的拿到引數。通常通過params、query、state以及search這四種方法進行傳參,接下來讓我給你們演示一下:

'/path/:id' component=

/>

//path指路徑;component指所跳轉的元件

"/path/otherrouter"

>你好!我是跳轉到的路由<

/link>

this

.props.history.

push()

;讀取引數用:

this

.props.match.params.id

'/query' component=

/>

>

//pash是路徑,query是引數

this

.props.history.

push(}

);讀取引數用:

this

.props.location.query.age

'/sort ' component=

/>

>

this

.props.history.

push(}

);讀取引數用:

this

.props.location.query.state

優缺點和query相同

'/router/searchrouter' component=

/>

"/router/searchrouter?id=12138"

>***<

/link>

this

.props.history.

push()

;讀取引數用:

this

.props.location.search

優缺點和params相同

千峰逆戰

react 路由傳參

今天,我們要討論的是react router中link傳值的三種表現形式。分別為通過萬用字元傳參 query傳參和state傳參。ps 進入正題前,先說明一下,以下的所有內容都是在react router v4的版本下。1.params route定義方式 link元件 html方式 萬用字元 js...

react路由傳參

1.萬用字元傳參 萬用字元link 頁面獲取 this.props.match.params.name 通過萬用字元傳參 這方法重新整理頁面資料不會消失,但是只能傳字串。2.query傳值 元件裡面 var query querylink 頁面獲取 this.props.location.query...

React路由傳參的方式

params 路由表中 component id component route link傳參 activeclassname active link 程式設計式導航 this props.history.push component 2 接參 this props.metch.paramsquer...