区别与使用场景

2024-12-31 暂无评论

在 react-router-dom 中，<Link> 和 <NavLink> 都是用于导航的组件，但它们的功能和用途有一些区别。以下是它们的详细对比：

1. `<Link>`

功能：用于在应用内导航，不会刷新页面。
特点：
- 只是一个普通的导航链接。
- 不会根据当前 URL 自动添加样式或类名。
使用场景：适用于普通的导航链接，不需要高亮或特殊样式。

示例：

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

2. `<NavLink>`

功能：用于在应用内导航，并且可以根据当前 URL 自动添加样式或类名。
特点：
- 默认会为当前激活的路由链接添加一个 active 类名。
- 可以通过 activeClassName 和 activeStyle 自定义激活状态的样式。
- 支持 exact 属性，用于精确匹配路由。
使用场景：适用于导航菜单，需要高亮当前选中项。

示例：

import { NavLink } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <NavLink to="/" exact activeClassName="active">
        Home
      </NavLink>
      <NavLink to="/about" activeClassName="active">
        About
      </NavLink>
    </nav>
  );
}

3. 主要区别

特性	`<Link>`	`<NavLink>`
功能	普通导航链接	导航链接，支持激活状态样式
激活状态	不支持	支持，默认添加 `active` 类名
自定义激活样式	不支持	支持，通过 `activeClassName` 和 `activeStyle`
精确匹配	不支持	支持，通过 `exact` 属性
使用场景	普通导航	导航菜单，需要高亮当前选中项

4. 详细说明

激活状态

<NavLink> 会为当前匹配的路由链接自动添加 active 类名。例如：
```
<NavLink to="/about">About</NavLink>
```
如果当前 URL 是 /about，渲染结果为：
```
<a href="/about" class="active">About</a>
```

自定义激活样式

可以通过 activeClassName 指定自定义类名：

<NavLink to="/about" activeClassName="selected">
  About
</NavLink>

如果当前 URL 是 /about，渲染结果为：

<a href="/about" class="selected">About</a>

也可以通过 activeStyle 指定内联样式：

<NavLink to="/about" activeStyle={{ fontWeight: 'bold', color: 'red' }}>
  About
</NavLink>

精确匹配

默认情况下，<NavLink> 会匹配 URL 的前缀。例如，/about 会匹配 /about 和 /about/team。

如果希望精确匹配，可以使用 exact 属性：

<NavLink to="/about" exact activeClassName="active">
  About
</NavLink>

5. 示例对比

使用 `<Link>`

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

使用 `<NavLink>`

import { NavLink } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <NavLink to="/" exact activeClassName="active">
        Home
      </NavLink>
      <NavLink to="/about" activeClassName="active">
        About
      </NavLink>
    </nav>
  );
}

6. 总结

<Link>：适用于普通导航，不需要高亮或特殊样式。
<NavLink>：适用于导航菜单，支持激活状态样式和高亮当前选中项。

根据具体需求选择合适的组件：

如果只是简单的导航，使用 <Link>。
如果需要高亮当前选中项，使用 <NavLink>。

通过合理使用 <Link> 和 <NavLink>，可以提升应用的用户体验和导航交互效果。