react更改路由入參 react怎麼路由傳參?

2021-10-16 16:46:37 字數 850 閱讀 1270

react路由傳參(4種方式)

1、通過params傳參(重新整理頁面後引數不消失,引數會在位址列顯示)

路由頁面: //注意要配置 /:id

//或:

xxjs方式:this.props.history.push('/demo/'+'6')

//或:

this.props.history.push()

獲取引數:this.props.match.params.id //注意這裡是match而非history

params傳參(多個動態引數)state=/$`})

獲取引數:this.props.match.params //結果

2、通過query傳參(重新整理頁面後引數消失)

路由頁面: //無需配置

路由跳轉並傳遞引數:鏈結方式:xxjs方式:this.props.history.push(})

獲取引數:this.props.location.query.name

優勢:傳參優雅,傳遞引數可傳物件;

3、通過state傳參( 重新整理頁面後引數不消失,state傳的引數是加密的,比query傳參好用)

路由頁面: //無需配置

路由跳轉並傳遞引數:鏈結方式:xxjs方式:this.props.history.push(})

獲取引數:this.props.location.state.name

優缺點同query

4、通過search

路由頁面:

路由跳轉並傳遞引數:鏈結方式:***js方式: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路由傳參

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

react路由傳參

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