React嵌套路由的使用

React嵌套路由 

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

代码使用

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

登录
 

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

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

 全部

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

NavLink标签使用方式

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

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

代码使用：

       全部
       史蒂夫

       
       

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

效果演示

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

withRouter内置组件的使用

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

代码使用

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

import { withRouter } from 'react-router-dom'

class All extends Component {
    jup=()=>{
        this.props.history.push('/')
    }
  render() {
    return (
      
hello React
    )
  }
}
export default withRouter(All)

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

路由拦截

可以使用Route中的render方法

isAuth()?:}/>