react-router-dom 版本6.18.0中NavLink的api和属性介绍

React Router 是一个基于 React 的路由库,它可以帮助我们在 React 应用中实现页面的切换和路由的管理。而 NavLink 则是 React Router 中的一个组件,它可以帮助我们实现导航栏的样式设置和路由跳转。

在 React Router 版本6.18.0 中,NavLink 组件的 API 和属性有以下几个:

API

  • NavLink:创建一个 NavLink 组件,用于实现导航栏的样式设置和路由跳转。

属性

  • to:指定 NavLink 跳转的路由地址,可以是一个字符串或一个对象。
  • exact:如果为 true,则 NavLink 只会在路径完全匹配时才会被激活。
  • strict:如果为 true,则 NavLink 在匹配时会考虑路径末尾的斜杠。
  • isActive:一个回调函数,用于自定义 NavLink 的激活状态。
  • location:指定 NavLink 的位置信息,可以是一个字符串或一个对象。
  • aria-current:用于设置 NavLink 的 ARIA 当前状态属性。

使用案例和场景

下面我们来看一下 NavLink 的使用案例和场景。

基本使用

首先,我们需要在项目中导入 NavLink 组件:

js 复制代码
import { NavLink } from 'react-router-dom';

然后,我们可以使用 NavLink 来创建一个导航链接:

js 复制代码
<NavLink to="/home">Home</NavLink>

这个 NavLink 组件会渲染成一个带有样式的链接,点击它会跳转到指定的路由地址。

设置样式

在 NavLink 中,我们可以通过设置 activeClassName 和 activeStyle 属性来设置激活状态下的样式。例如:

jsx 复制代码
<NavLink to="/home" activeClassName="active">Home</NavLink>

这个 NavLink 组件在激活状态下会添加一个名为 "active" 的类名,我们可以通过 CSS 来设置这个类名下的样式。

css 复制代码
.active {
  color: red;
}

除了 activeClassName 属性,我们还可以使用 activeStyle 属性来设置激活状态下的样式,例如:

js 复制代码
<NavLink to="/home" activeStyle={{ color: 'red' }}>Home</NavLink>

这个 NavLink 组件在激活状态下会应用一个内联样式,将链接的颜色设置为红色。

精确匹配

有时候,我们希望 NavLink 只在路径完全匹配时才会被激活,这时可以使用 exact 属性。例如:

js 复制代码
<NavLink to="/home" exact>Home</NavLink>

这个 NavLink 组件只会在路径为 "/home" 时才会被激活,如果路径为 "/home/other",则不会被激活。

严格匹配

有时候,我们希望 NavLink 在匹配时考虑路径末尾的斜杠,这时可以使用 strict 属性。例如:

js 复制代码
<NavLink to="/home/" strict>Home</NavLink>

这个 NavLink 组件只会在路径为 "/home/" 时才会被激活,如果路径为 "/home",则不会被激活。

自定义激活状态

有时候,我们希望 NavLink 的激活状态不仅仅是路径匹配,还要满足一些其他的条件,这时可以使用 isActive 属性。例如:

js 复制代码
<NavLink to="/home" isActive={(match, location) => {
  // 自定义激活状态的逻辑
  return match && location.search === '?active=true';
}}>Home</NavLink>

这个 NavLink 组件会根据自定义的激活状态逻辑来判断是否激活。

使用逻辑

css 复制代码
<NavLink
       className={({ isActive }) => (isActive ? " selectnav" : "")}
       to={ele.path}>
  {ele.name}
</NavLink>

默认使用

根据路径默认匹配 进行激活 激活的默认的class active

设置位置信息

有时候,我们希望 NavLink 的位置信息不是当前的路由地址,而是其他的地址,这时可以使用 location 属性。例如:

js 复制代码
<NavLink to="/home" location={{ pathname: '/other' }}>Home</NavLink>

这个 NavLink 组件的位置信息为 "/other",但是点击它时会跳转到 "/home"。

设置 ARIA 当前状态属性

最后,我们可以使用 aria-current 属性来设置 NavLink 的 ARIA 当前状态属性。例如:

js 复制代码
<NavLink to="/home" aria-current="page">Home</NavLink>

这个 NavLink 组件会在激活状态下添加一个 aria-current 属性,将它的值设置为 "page"。

代码和注释

最后,我们来看一下完整的代码和注释:

js 复制代码
import { NavLink } from 'react-router-dom';

function App() {
  return (
    <nav>
      {/* 基本使用 */}
      <NavLink to="/home">Home</NavLink>
      
      {/* 设置样式 */}
      <NavLink to="/home" activeClassName="active">Home</NavLink>
      <NavLink to="/home" activeStyle={{ color: 'red' }}>Home</NavLink>
      
      {/* 精确匹配 */}
      <NavLink to="/home" exact>Home</NavLink>
      
      {/* 严格匹配 */}
      <NavLink to="/home/" strict>Home</NavLink>
      
      {/* 自定义激活状态 */}
      <NavLink to="/home" isActive={(match, location) => {
        // 自定义激活状态的逻辑
        return match && location.search === '?active=true';
      }}>Home</NavLink>
      
      {/* 设置位置信息 */}
      <NavLink to="/home" location={{ pathname: '/other' }}>Home</NavLink>
      
      {/* 设置 ARIA 当前状态属性 */}
      <NavLink to="/home" aria-current="page">Home</NavLink>
    </nav>
  );
}

以上就是 React Router 版本6.18.0 中 NavLink 的 API 和属性介绍、基本使用案例和场景,以及代码和注释。希望可以帮助大家更好地使用 React Router 中的 NavLink 组件。

相关推荐
柯腾啊31 分钟前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇34 分钟前
ts 定义重复对象字段
前端
HashTang1 小时前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
Cory.眼2 小时前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信
前端架构师-老李2 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡2 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
拖拉斯旋风2 小时前
📚 JavaScript 变量声明三剑客:`var`、`let`、`const` 学习笔记
javascript
用户21496515898753 小时前
从零搭建uniapp环境-记录
前端
可触的未来,发芽的智生4 小时前
追根索源:换不同的词嵌入(词向量生成方式不同,但词与词关系接近),会出现什么结果?
javascript·人工智能·python·神经网络·自然语言处理
努力写代码的熊大4 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript