说明
最近在实习中,被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>