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>