React嵌套路由的使用

React嵌套路由 

嵌套路由原则：可以无限嵌套，但是必须要让使用二级路由的一级路由匹配到，否则不显示

代码使用

首先，我们在根组件中引入组件login

<Link to='/login?name=张三&age=18'>登录</Link>
 <Route path='/login' component={login}></Route>

注意：路由嵌套传值只能使用query方式的传值，params传参方式他会出现不知道该解析那个路由，导致实现不了路由嵌套 

接着，我们在login组件中引入组件All

 <Link to='/login/All'>全部</Link>
<Route path='/login/All' component={All}></Route>

这样，我们就实现了react路由的嵌套

NavLink标签使用方式

作用：NavLink可以让a标签带有active切换的效果

引入：import { NavLink, Route } from 'react-router-dom';

代码使用：

       <NavLink to='/login/All' activeClassName='so'>全部</NavLink>
       <NavLink to='/login/Al' activeClassName='so'>史蒂夫</NavLink>
 
       <Route path='/login/All' component={All}></Route>
       <Route path='/login/Al' component={All}></Route>

给他设置了一个背景颜色蓝色 

效果演示

点击NavLink标签时，实现背景效果的切换

withRouter内置组件的使用

作用：将普通的组件，变成可以访问路由api的路由组件

代码使用

我们在二级路由下的All组件中使用withRouter内置组件，我们给他一个点击事件

import { withRouter } from 'react-router-dom'
 
class All extends Component {
    jup=()=>{
        this.props.history.push('/')
    }
  render() {
    return (
      <div onClick={this.jup}>hello React</div>
    )
  }
}
export default withRouter(All)

当我们点击时，让他跳转到我们的根页面中