finish lesson

day25/note/lesson079_use_navlink_component.md

@@ -16,3 +16,51 @@
 
 以上便是上节课所聊的路由组件和一般组件的区别，接下来我们来学习`NavLink`的使用
 
+## 导航高亮
+
+我们现在虽然说是已经完成了我们案例的功能，但是还不完善，不知道大家有没有发现，我们点击导航栏中的导航项的时候并没有高亮的效果？可能有人要说了，好像有一点点。其实那是`bootstrap`自带的一个效果。那么我们怎么解决掉这个问题呢？
+
+我们回到代码中去，之前我们的静态页面中是不是根据`className`中的`active`来确定是不是高亮？但是我们现在没有。那么我们是不是要动态给我买的这两个导航项追加`className`？那么怎么追加呢？也就不卖关子了，我们这里就不能用`Link`组件了，得用`NavLink`组件。那我们来改一下代码：
+
+```jsx
+export default class App extends Component {
+  render() {
+    return (
+      <div>
+        ...
+            <div className="list-group">
+              <NavLink className="list-group-item" to="/about">About</NavLink>
+              <NavLink className="list-group-item" to="/home">Home</NavLink>
+            </div>
+        ...
+    );
+  }
+}
+```
+
+我们把不需要关注的代码隐藏掉，来看一下，我们是不是几乎什么都没做，只是把`Link`改成了`NavLink`组件，那么我们来看一下效果吧：
+
+![image-20220113163859651](https://file.lynchow.com/image-20220113163859651.png)
+
+我们现在什么都没点，两个都是空空的，那我们点击`About`
+
+![image-20220113164036933](https://file.lynchow.com/image-20220113164036933.png)
+
+现在`About`导航项高亮了，而且`class`里面也追加上了`active`，再换到`Home`
+
+![image-20220113164130774](https://file.lynchow.com/image-20220113164130774.png)
+
+`Home`也高亮了，而且`class`也追加了`active`，而`About`的高亮也就取消了。
+
+## `NavLink`原理
+
+我们功能实现了，但是如果我们就说这个玩意儿至于单独还来写一节课吗？我们要了解底层原理，首先我们考虑一下我们的高亮是不是基于`bootstrap`的？`bootstrab`会根据`active`这个类名来判断要不要高亮。而`NavLink`就碰巧了，只要店谁，就会自动给谁加上`active`。
+
+`NavLink`的设计理念就是谁被点击就给谁加`active`，而`bootstrap`的设计理念则是谁有`active`我就把谁高亮。但是呢如果我们不用`bootstrap`怎么办？比如我们觉得`bootstrap`的样式不好看，我们用别的。或者说我们用`bootstrap`但是这个高亮的样式我们要单独定制。那么我们就不能用`active`了，不然的话可能会引起样式冲突的啊。
+
+这就要说到`NavLink`的一个巧妙之处了。`NavLink`可以传一个属性叫`activeClassName`，只要我们加上这个属性，我们就可以规定我们类名中追加什么，那么我们不用`active`然后单独写一个高亮的样式用`NavLink`这样就可以实现我既用现成的`CSS`库，又能够自定义我们想要的样式。
+
+## 总结
+
+- `NavLink`可以自动根据点击状态追加`className`，默认`active`
+- `NavLink`可以根据`activeClassName`来指定追加的`className`