React路由-进阶篇
2020-02-10

路由进阶

1.多级路由,和之前的思想一样,在子路由里面继续写Route,继续挂载组件,就可以实现多级路由

比如这样:class Food extends Component{ render() { return ( <Fragment> <Link to="/food/foodlist">foodlist</Link> &nbsp; <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> <Route path="/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里面就有路由信息了