（四）NavLink的使用

🍇一、点击路由高亮

1. 如果当单击对应路由需要出现高亮效果的时候，就不能使用 <Link> 这个内置组件了

2. 使用另外一个组件实现高亮效果 <NavLink>

3. 如果需要自定义高亮样式的话需要给 <NavLink> 传递一个参数 activeClassName 注意：如果自定义样式的类名就叫做 active 就可以省去 activeClassName 这个属性，直接在 .active 这个类名里面写样式

<NavLink activeClassName="自定义的样式类名" className="xxxx">首页</NavLink>

二、封装自己的 <NavLink/> 组件

当我们一个项目当中有很多连接的时候，就会重复写这样的代码。

<NavLink activeClassName="自定义的样式类名" className="xxxx">xxx</NavLink>
<NavLink activeClassName="自定义的样式类名" className="xxxx">xxx</NavLink>
<NavLink activeClassName="自定义的样式类名" className="xxxx">xxx</NavLink>
<NavLink activeClassName="自定义的样式类名" className="xxxx">xxx</NavLink>
<NavLink activeClassName="自定义的样式类名" className="xxxx">xxx</NavLink>

我们自己来封装一下上面这组件，让他变得更加好用,把需要重复写的东西提出来写，需要动态写的属性通过 props 传递进去

// 封装
class xxNavLink extends react.Component {
    render() {
        const { to, title } = this.props
        return(
            <NavLink activeClassName="xxx" className="xxx" {...this.props}>{title}</NavLink>
        )
    }
}

// 使用
<xxNavLink to="/home">

三、如何接收标签体内容

标签体内容是一个特殊的属性，他被子组件接收到了 children 属性上了 使用他的时候有两种使用方式

1. 方式一

<NavLink activeClassName="xxx" className="xxx" {...this.props}>{this.props.children}</NavLink>

2. 方式二，直接使用标签属性接收也是可以解析，因为他是把所有标签体内容都放到了 children 属性身上，这样就可以写成自闭和的标签了

<NavLink activeClassName="xxx" className="xxx" {...this.props}/>

总结

1. NavLink 可以实现路由连接的高亮，通过 activeClassName 指定样式名

2. 标签体内容是一个特殊的标签属性

3. 通过 this.props.children 可以获取标签体内容