第一種傳參方式，動態路由傳參

通過設定link的path屬性，進行路由的傳參，當點選link標籤的時候，會在上方的url地址中顯示傳遞的整個url

<Link to='/home?name=dx'>首頁</Link>

如果想真正獲取到傳遞過來的引數，需要在對應的子元件中
this.props.location.search 獲取字串，再手動解析

因為傳參能夠被使用者看見，傳遞獲取比較麻煩，所以不推薦

第二種傳參方式，隱式路由傳參

<Link to={{
     pathname: 'about',state: {
      name: 'dx'
     }
    }}>關於</Link>

所謂隱式路由傳參，就是傳參的資訊不回暴露在url中，當點選該link標籤，想要獲取到傳遞的引數，就在對應的路由元件中，通過this.props.location.state獲取即可

推薦使用，比較安全，獲取傳遞引數都比較方便

第三種傳參方式 元件間傳參

何時使用？
當一個路由元件需要接收來自父元件傳參的時候

改造route標籤通過component屬性啟用元件的方式
正www.cppcns.com常情況下的route標籤在路由中的使用方式

//簡潔明瞭，但沒辦法接收來自父元件的傳參
<Route path='/test' component={Test}></Route>

改造之後

<Link to='/test'>測試</Link>
<Route path='/test' render={(routeProps) => {
 //routeProps就是路由元件傳遞的引數
     return (
     //在原先路由元件引數的情況，擴充套件繫結父元件對子元件傳遞的引數
      <Test {...routeProps} name='dx' age={18} />
     )
 }}></Route> 

當點選link標籤時，通過在對應的test子元件中，this.props獲取來自父元件傳遞的引數和路由元件自帶的引數

第四種傳參方式 withRouter 高階元件給子元件繫結路由引數

withRouter 何時使用？

想要在某個子元件中獲取路由的引數，必須得使用路由中的route標籤的子元件才能被繫結上路由的引數。

為了解決不通過route標籤繫結的子元件獲取路由引數的問題，需要使用withRouter

一般用在返回首頁，返回上一級等按鈕上

import React from 'react';
import BackHome from程式設計客棧 './backhome';
export default class Test extends React.Component {
 ren程式設計客棧der () {
  console.log(this.props)
www.cppcns.com  return (
   <div>
http://www.cppcns.com    這是測試的內容
//返回首頁的按鈕不是通過route標籤渲染的，所以該子元件的this.props中沒有路由引數
    <BackHome>返回首頁</BackHome> 
   </div>
  )
 }
}

import React from 'react';
//匯入withRoute
import {withRouter} from 'react-router-dom';
class BackHome extends React.Component {
 goHome = () => {
  //必須在使用withRouter的情況下，該元件在this.props中才有路由引數和方法
  //否則，會報錯
  this.props.history.push({
   pathname: '/home',state: {
    name: 'dx' //同樣，可以通過state向home路由對應的元件傳遞引數
   }
  })
 }
 render () {
  return (
   <button onClick={this.goHome}>this.props.children</button>
  )
 }
}
//匯出的時候，用withRouter標籤將backHome元件以引數形式傳出
export default withRouter(BackHome)

當你需要使用的時候，就很重要，所以還是比較推薦。

到此這篇關於淺談react路由傳參的幾種方式的文章就介紹到這了,更多相關react路由傳參內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！