- Objective:
- Breadcrumb:
# 概念阐释
## 语义
在React中，我们使用`Link`或`NavLink`替代HTML中的`<a>`标签，允许用户在**不触发完整页面重新加载**的情况下导航到不同的路由。而`NavLink`作为一种特殊的`Link`，带有默认的`a.active`属性，能够完成更细颗粒度的控制和反馈。例如：
- 突出显示当前的链接，加粗或背景颜色不同；
- 为屏幕阅读器等辅助技术提供有用的上下文；
- 提供了一个“转换”值，可以更细颗粒度地控制试图转换；
## 语法
```js
// Link
<Link to={}>...</Link>
// NavLink
<NavLink
to="/messages"
className={({ isActive, isPending }) =>
isPending ? "pending" : isActive ? "active" : ""
}
>
Messages
</NavLink>;
```
# 实例
### `<Link>`
```js
import * as React from "react";
import { Link } from "react-router-dom";
function UsersIndexPage({ users }) {
return (
<div>
<h1>Users</h1>
<ul>
{users.map((user) => (
<li key={user.id}>
<Link to={user.id}>{user.name}</Link>
</li>
))}
</ul>
</div>
);
}
```
### `NavLink`+样式改变
```js
...
import { NavLink } from "react-router-dom";
export default function Header () {
...
return (
<div className="header">
<NavLink to="/about">About</NavLink>
<NavLink to="/articles">Articles</NavLink>
<NavLink to="/categories">Categories</NavLink>
{
currentUser.username
? <>
<a href="/profile">Profile</a>
<button onClick={handleLogout} className="logout"> Log Out </button>
</>
: <NavLink to="/sign-up">Sign Up</NavLink>
}
</div>
)
}
```
```css
/* 当用户停留在导航栏所在页面时，导航栏的字体是加粗的 */
.header a.active {
font-weight: bold;
}
```
# 相关内容
之所以不在 React 中使用`a`标签是因为它会导致页面重新加载，而 NavLink 不会。React 是[[SPA]]。
# 参考资料
- [NavLink-React Router](https://reactrouter.com/en/main/components/nav-link)
- [Linking to Route - codecademy](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-react-router-60d12e07-e364-45e4-9102-8d919d464f5e/lessons/intermediate-react-router-v6/exercises/2022-audit-linking-to-routes)
- 本地文件夹：react_router_v6_lession_starting_code