路由进阶
1.多级路由，和之前的思想一样，在子路由里面继续写Route，继续挂载组件，就可以实现多级路由
比如这样：class Food extends Component{render() {return (<Fragment><Link to="/food/foodlist">foodlist</Link> <Link to="/food/foodmenu">foodmenu</Link><Switch><Route path="/food/foodlist" component={FoodList}>foodlist</Route><Route path="/food/foodmenu" component={FoodMenu}>foodmenu</Route></Switch></Fragment>)}}
总之，万变不离其宗，都是一样的道理2.假如说多级路由嵌套层次太深，那我们写子级路由的path就会特别麻烦，所以我们不妨这样搞
const Food = ({match}) => {return (<div><Link to={`${match.path}/foodmenu`}>foodmenu</Link><Switch><Route path={`${match.path}/foodmenu`} component={FoodMenu}/></Switch></div>)
}
//在这里，match是从props解构出来的，如果你不嫌麻烦，大可以写成this.props.match，match.path就是我们当前这个路由的路径，有了这个，不管路由嵌套层次有多深，我们都可以通过这种方式来写上一级的路由2.动态路由传参/foodList/:id，传过去的值就在路由挂载组件的props中，props里面有个match，match中有个params，都在这里面，要注意：props只有在路由挂载的组件中才有
还可以通过/foodList?id=6这种方式传参，传过去的值在props中的location里面的的search中3.编程式导航，可以在一个组件中用this.props.history.push("/path",{name:"hellow"})，来进行传参，传过去的值在props.location.state中
4.Route里面还有两个属性，render和children
-render是一个函数，语法：render={()=>{return <div></div>}}，只要你的路由匹配了，这个函数才会执行
-children也是一个函数，不管匹配不匹配，这个函数都会执行
-他们两个有个优先级关系，render的优先级总是高于children，是会覆盖children的<Fragment><h1>header</h1><Link to="/wiki/wikiList/">gogogo</Link><Routepath="/wiki/wikiList"render={()=>{return <div>wikilist-children</div>}} //这个是只有当你路由匹配到了/wiki/wikiList才会执行// children={() => {// return <div>wikilist-children</div>// }// } //这个是只要你的路由跳到wiki了，那children就会执行> </Route>
</Fragment>5.withRouter，一个典型的高阶组件,如果我们既想实现点击跳转，又不想用Link的那个a标签，我们可以使用withRouter给我们吐出来一个实现点击跳转路由的组件，代码例子：
//使用自定义的组件：
<CustomNavLink to="/food">food</CustomNavLink>
<CustomNavLink to="/wiki">wiki</CustomNavLink>
<CustomNavLink to="/profile">profile</CustomNavLink>
//给自定义组件实现点击功能：
const CustomNavLink = withRouter(class EnhenceCustomNavLink extends Component {render () {return (<li onClick={this.goto.bind(this)}>{this.props.location.pathname === this.props.to ? '>' + this.props.children : this.props.children}</li>)}goto () {this.props.history.push(this.props.to)}
})//加入你的组件没有路由信息，你可以使用withRouter(component)这样将这个组件包起来，props里面就有路由信息了