React实现原生导航栏----＜NavLink＞的使用

说明

最近在实习中，被React项目中导航栏困住了，项目中需要点击导航栏中某一处，进行路由跳转，使用Antd的导航栏，虽然能跳转，但是需要点击两次，效果不好（与我个人实力有关），虽然有大佬给我的代码参考，他们也是用的Antd，但是我没有看懂，换了多次关键词搜索。
搜索“react 导航跳转页面”关键词的结果中，我看到了这篇文章：
《react实现点击导航部分页面跳转（路由）》
虽然没有解决我的问题，但是看到了NavLink，于是把这个作为关键词，在搜索结果中，得到了这两篇文章的帮助。
《React Router中Link和NavLink的学习总结》
《React-Router实战：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

// 在元素处于活动状态时应用于该元素的样式。

<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>