NavLink的学习

hooks (Router5.0之后出现的)

• 不在类组件内使用
• useHistory : 获取History对象
• useLocation : 获取Location对象
• useParams : 获取Params
• useRouteMatch : 获取Match

NavLink 组件

NavLink 与 Link 类似，但是它提供了两个特殊属性用来处理页面导航

activeStyle

• 当当前 URL 与 NavLink 中的 to 匹配的时候，激活 activeStyle 中的样式

activeClassName

• 与 activeStyle 类似，但是激活的是 className

return ( <
        nav >
        <
        NavLink to = "/"
        exact activeClassName = "active"
        activeStyle = {
            {
                color: 'red'
            }
        } >
        首页 < /NavLink> <
        span > < /span>

        <
        NavLink to = "/about"
        exact activeClassName = "active-about"
        activeStyle = {
            {
                color: 'red'
            }
        } >
        尾页 < /NavLink> <
        span > < /span>

        <
        NavLink to = "/about/more"
        exact activeClassName = "active-more"
        activeStyle = {
            {
                color: 'red'
            }
        } >
        佳佳 < /NavLink> <
        span > < /span> < /
        nav >
    )