下载58同城网招聘找工作seo分析与优化实训心得
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' }}>Home</NavLink>
这个 NavLink 组件在激活状态下会应用一个内联样式，将链接的颜色设置为红色。
精确匹配
有时候，我们希望 NavLink 只在路径完全匹配时才会被激活，这时可以使用 exact 属性。例如：
<NavLink to="/home" exact>Home</NavLink>
这个 NavLink 组件只会在路径为 “/home” 时才会被激活，如果路径为 “/home/other”，则不会被激活。
严格匹配
有时候，我们希望 NavLink 在匹配时考虑路径末尾的斜杠，这时可以使用 strict 属性。例如：
<NavLink to="/home/" strict>Home</NavLink>
这个 NavLink 组件只会在路径为 “/home/” 时才会被激活，如果路径为 “/home”，则不会被激活。
自定义激活状态
有时候，我们希望 NavLink 的激活状态不仅仅是路径匹配，还要满足一些其他的条件，这时可以使用 isActive 属性。例如：
<NavLink to="/home" isActive={(match, location) => {// 自定义激活状态的逻辑return match && location.search === '?active=true';
}}>Home</NavLink>
这个 NavLink 组件会根据自定义的激活状态逻辑来判断是否激活。
使用逻辑
<NavLinkclassName={({ isActive }) => (isActive ? " selectnav" : "")}to={ele.path}>{ele.name}
</NavLink>
默认使用
根据路径默认匹配 进行激活 激活的默认的class active
设置位置信息
有时候，我们希望 NavLink 的位置信息不是当前的路由地址，而是其他的地址，这时可以使用 location 属性。例如：
<NavLink to="/home" location={{ pathname: '/other' }}>Home</NavLink>
这个 NavLink 组件的位置信息为 “/other”，但是点击它时会跳转到 “/home”。
设置 ARIA 当前状态属性
最后，我们可以使用 aria-current 属性来设置 NavLink 的 ARIA 当前状态属性。例如：
<NavLink to="/home" aria-current="page">Home</NavLink>
这个 NavLink 组件会在激活状态下添加一个 aria-current 属性，将它的值设置为 “page”。
代码和注释
最后，我们来看一下完整的代码和注释：
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 组件。