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 组件。

相关推荐
文心快码BaiduComate12 分钟前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员
babytiger12 分钟前
python 通过selenium调用chrome浏览器
前端·chrome
passer98118 分钟前
基于webpack的场景解决
前端·webpack
华科云商xiao徐25 分钟前
Java并发编程常见“坑”与填坑指南
javascript·数据库·爬虫
奶昔不会射手32 分钟前
css3之grid布局
前端·css·css3
举个栗子dhy36 分钟前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
Coding_Doggy42 分钟前
苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript
前端
前端与小赵42 分钟前
vue3和vue2生命周期的区别
前端·javascript·vue.js