**<NavLink> **可以理解为 **<Link> **的升级版，该链接被点击时会追加一个 **active** 样式—高亮效果，写标签时可以加上 activeClassName来设置样式类名（使用了bootstrap时可能会造成冲突，此时可以设置自己写的样式权重为最高—在后面加上!important来解决这个问题）

  • className是 NavLink一开始展示时样式类名
  • activeClassName是NavLink被点击后展示的样式类名

封装 NavLink

为什么要封装这个玩意

有时一个应用中需要多个 NavLink ,此时就会发现 大量的 NavLink 标签中的各个属性几乎都相同—全都是优化空间啊~！

  1. <NavLink activeClassName="my-active"className="list-group-item"to="./about">About</NavLink>
  2. <NavLink activeClassName="my-active"className="list-group-item"to="./home">Home</NavLink>
  3. //这这这那那那全都是一样的不是么

要注意的知识点

  • 二次封装
  • 多个 props 直接用 {...this.props}展开运算符来传入参数
  • 标签体内容是特殊的标签属性：也就是说标签体内容其实也是可以当作 props 中的一项传入组件定义的。在props中，名为children，意味着你可以在标签传属性时传入children="xxx"来控制标签体内容，也可以在组件定义中的标签体内容直接调**{this.props.children}**。很明显，最简单好写的方法是前者。

    code

    二次封装的 NavLink 一般组件 ```javascript import React, { Component } from ‘react’ import { NavLink } from ‘react-router-dom’

export default class MyNavLink extends Component { render() { return ( // {title} //最简洁写法↓ ) } }

  1. **在 App,js 中调用**
  2. ```javascript
  3. <MyNavLink to="./xx" children="test"></MyNavLink>