React嵌套路由的使用

React嵌套路由 

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

代码使用

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

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

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

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

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

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

NavLink标签使用方式

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

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

代码使用：

1.  
   <NavLink to='/login/All' activeClassName='so'>全部</NavLink>
2.  
   <NavLink to='/login/Al' activeClassName='so'>史蒂夫</NavLink>
3.  
    
4.  
   <Route path='/login/All' component={All}></Route>
5.  
   <Route path='/login/Al' component={All}></Route>

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

效果演示

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

withRouter内置组件的使用

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

代码使用

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

1.  
   import { withRouter } from 'react-router-dom'
2.  
    
3.  
   class All extends Component {
4.  
   jup=()=>{
5.  
   this.props.history.push('/')
6.  
   }
7.  
   render() {
8.  
   return (
9.  
   <div onClick={this.jup}>hello React</div>
10.  
    )
11.  
    }
12.  
    }
13.  
    export default withRouter(All)

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

路由拦截

可以使用Route中的render方法

<Route path="/center" render={()=>isAuth()?<Center/>:<Login/>}/>

这篇好文章是转载于：学新通技术网