說明
最近在實習中，被React項目中導航欄困住了届慈，項目中需要點擊導航欄中某一處，進行路由跳轉忿偷，使用Antd的導航欄金顿，雖然能跳轉，但是需要點擊兩次鲤桥，效果不好（與我個人實力有關）揍拆，雖然有大佬給我的代碼參考，他們也是用的Antd茶凳，但是我沒有看懂嫂拴，換了多次關鍵詞搜索播揪。
搜索“react 導航跳轉頁面”關鍵詞的結果中，我看到了這篇文章：
《react實現(xiàn)點擊導航部分頁面跳轉（路由）》
雖然沒有解決我的問題筒狠，但是看到了NavLink剪芍，于是把這個作為關鍵詞，在搜索結果中窟蓝，得到了這兩篇文章的幫助。
《React Router中Link和NavLink的學習總結》
《React-Router實戰(zhàn)：NavLink》
知識整理
< NavLink >是< Link >的一個特定版本饱普，會在匹配上當前的url的時候給已經渲染的元素添加參數运挫，組件的屬性有
| 屬性 | 屬性說明 |
|---|---|
| activeClassName(string) | 設置選中樣式，默認值為active |
| activeStyle(object) | 當元素被選中時套耕，為此元素添加樣式 |
| exact(bool) | 為true時谁帕，只有當導致和完全匹配class和style才會應用 |
| strict(bool) | 為true時，在確定為位置是否與當前URL匹配時冯袍，將考慮位置pathname后的斜線 |
| isActive(func) | 判斷鏈接是否激活的額外邏輯的功能 |
示例
1.引入使用
import { NavLink } from 'react-router-dom'
2.activeClassName：string
//當被激活時匈挖，顯示類名為selected 的css樣式
<NavLink to="/admin" activeClassName="light">
About
</NavLink>
3.activeStyle：object
// 在元素處于活動狀態(tài)時應用于該元素的樣式。
<ul >
<li >
<NavLink
to="/admin"
activeStyle={{
background: '#1890FF',
display: 'block',
width: '90px',
textAlign: 'center'
}}
>
查看
</NavLink>
</li>
</ul>
4.exact: 精確匹配
//僅當url與NavLink里to的值完全相等時康愤，才應用類名為selected的CSS樣式
<NavLink exact to="/admin" activeClassName="light">
About
</NavLink>
