React Router路由傳參方式總結

首先我們要知道一個前提，路由傳遞的參數我們可以通過props里面的屬性來獲取。只要組件是被<Router>組件的<component>定義和指派的，這個組件自然就有了props的match，history和location屬性。

了解了這個，接下來我們進入正題：

 

1.動態路由用法一：（：id法） 通過 match.params獲取參數

 

<Link exact to={`${match.path}/foodlist/3`} component={FondList}/>  </Link>
<Switch>
    <Route path={`${match.path}/foodlist/:id`} component={FondList}/> </Route
</Switch>
 
const FoodList = ({match})=>{     //   FoodList是通過component渲染出來的，所有它有props的match屬性。        
     <div>FondList-{match.params.id}</div>                //此時id就被渲染出來了
  }

 

 2.動態路由用法二：（？id法） 不建議使用 ：打印出來發現沒有可以直接獲取？號后面值的方法，我們可以自己封裝一個方法或者使用第三方的庫。所以不建議使用？傳參

 

<Link exact to={`${match.path}/foodlist？id=3`} component={FondList}/> </Link>
<Switch>
    <Route path={`${match.path}/foodlist`} component={FondList}/> </Route
</Switch>
 
const FoodList = (props)=>{           
    console.log(props)         //打印出來發現沒有可以直接獲取？號后面值的方法，我們可以自己封裝一個方法或者使用第三方的庫。所以不建議使用？傳參
    <div>FondList</div>               
  }

 

3.事件點擊跳轉（編程式導航）

通過this.props.history.push跳轉路由，通過 props.location.state獲取參數。
class FoodList extends Component{
    render(){
       let  {match,location,history} =this.props
       return (
          <div>foodlist={match.parmas.id}</div>
          <button onCLick={this.goto.bind(this)}>foodmenu</button>
        ) 
   }
    goto(){
       this.props.history.push('/food/foodmenu',{name:"kaiqin"})       //path有兩個參數，第一個是path路徑，第二個是state參數。
    }
}
 
const FoodMenu =(props){
    return <div>foodmenu-{props.location.state.name}</div>   //通過 props.location.state獲取參數。
}
 
<Link exact to={`${match.path}/foodlist/3`} component={FondList}/>  </Link>
<Switch>
           <Route path={`${match.path}/foodlist/:id`} component={FondList}/> </Route
</Switch>
 

 

*另再附贈你們一個小知識點：

 

在定義子路由的時候，當前路徑通過match.path來寫。match.path這樣寫的好處，不管上一層路由多長，寫這個就都能讀出來，不用手動去寫了。

 

  <Route path={`${match.path}/foodmenu`} component={Foodmenu}/> </Route>