react-router-dom 之 Link 与NavLink

最新推荐文章于 2025-03-30 09:15:00 发布

小桃酥

最新推荐文章于 2025-03-30 09:15:00 发布

阅读量2.2k

点赞数

分类专栏：开发准备

本文链接：https://blog.youkuaiyun.com/smaller_coder/article/details/102851304

版权

开发准备专栏收录该内容

7 篇文章

订阅专栏

本文主要记录react项目react-router的使用,主要介绍两种，Link 和 NavLink

//menuList.js 导航条
import { NavLink ,Link} from 'react-router-dom'

<NavLink exact to={childItem.path} data-index={number} className=    {store.childNowIndex === number ? 'selectItem' : ''}>{childItem.title}
</NavLink>

//routeConfig.js
import { Route } from 'react-router-dom'
<Route exact path="/" component={Login} />

1、Link

当你点击<Link>时，url会更新，组件会被重新渲染，但是页面不会重新加载，to可以是字符串也可以是对象，to={{pathname: '/courses',search: '?sort=name',hash: '#the-hash',state: { fromDashboard: true }}


// to为string
<Link to="/about">关于</Link>
 
// to为obj
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>
 
// replace 
<Link to="/courses" replace />

2、NaviLink

NavLink
<NavLink>是<Link>的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，组件的属性有

activeClassName(string)：设置选中样式，默认值为active
activeStyle(object)：当元素被选中时，为此元素添加样式
exact(bool)：为true时，只有当导致和完全匹配class和style才会应用
strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线
isActive(func)判断链接是否激活的额外逻辑的功能
嗯、看例子就懂了


// activeClassName选中时样式为selected
<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>
 
// 选中时样式为activeStyle的样式设置
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>
 
// 当event id为奇数的时候，激活链接
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}
 
<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>