首先我们要知道一个前提，路由传递的参数我们可以通过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>