EnlightenCode

React Router中，Link和NavLink的区别与使用 ​

在 React Router 中，Link 和 NavLink 都是用于路由导航的重要组件。它们的主要区别在于：

  • Link 是基础路由导航组件
  • NavLink 是 Link 的特殊版本，会在匹配当前路由时自动添加激活样式

Link 组件主要用于基础的路由跳转，使用方式简单直接：

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

function Navigation() {
  return (
    <nav>
      <Link to="/home">首页</Link>
      <Link to="/about">关于我们</Link>
    </nav>
  );
}

NavLink 相比 Link 增加了激活状态的处理，特别适合用于导航菜单：

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

function Navigation() {
  return (
    <nav>
      <NavLink 
        to="/home"
        className={({ isActive }) => isActive ? 'active' : ''}
      >
        首页
      </NavLink>
      <NavLink 
        to="/about"
        className={({ isActive }) => isActive ? 'active' : ''}
      >
        关于我们
      </NavLink>
    </nav>
  );
}

NavLink 的 to 属性支持传入一个对象，可以携带更多路由信息：

js
<NavLink
  to={{
    pathname: '/products',
    search: '?sort=name',
    hash: '#top',
    state: { fromDashboard: true }
  }}
  className={({ isActive }) => isActive ? 'active' : ''}
>
  产品列表
</NavLink>

这个对象可以包含以下属性：

  • pathname: 路由路径
  • search: URL 查询参数
  • hash: URL 哈希值
  • state: 路由状态数据（可在目标页面通过 location.state 访问）

使用建议 ​

  1. 普通跳转链接使用 Link
  2. 导航菜单等需要显示当前激活状态的场景使用 NavLink
  3. 需要传递复杂路由信息时，可以使用 to 对象形式

通过合理使用 Link 和 NavLink，可以构建出更加直观和用户友好的 React 应用导航系统。