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 组件:
import {
NavLink } from 'react-router-dom';
然后,我们可以使用 NavLink 来创建一个导航链接:
<NavLink to="/home">Home</NavLink>
这个 NavLink 组件会渲染成一个带有样式的链接,点击它会跳转到指定的路由地址。
设置样式
在 NavLink 中,我们可以通过设置 activeClassName 和 activeStyle 属性来设置激活状态下的样式。例如:
<NavLink to="/home" activeClassName="active">Home</NavLink>
这个 NavLink 组件在激活状态下会添加一个名为 “active” 的类名,我们可以通过 CSS 来设置这个类名下的样式。
.active {
color: red;
}
除了 activeClassName 属性,我们还可以使用 activeStyle 属性来设置激活状态下的样式,例如:
<NavLink to="/home" activeStyle={
{
color: 'red' }