面试题：React中Link与NavLink在路由状态管理上的差异

Question

假设在一个多页面的React应用中，需要实时监控导航链接的激活状态以进行某些业务逻辑处理，比较Link和NavLink在处理这种路由状态管理时各自的优势与劣势，并说明如何基于它们的特性来优化状态管理逻辑。

Answer 1

Link

• 优势：
  • 简单灵活，仅用于导航到指定路由，不依赖路由状态，可用于非导航相关的普通跳转场景，例如跳转到外部链接。
  • 轻量级，不会对路由状态进行额外处理，性能开销小，适合仅需要单纯导航功能的场景。
• 劣势：
  • 没有内置的激活状态管理功能，若要监控激活状态，需手动通过比较当前路由和目标路由来实现，代码相对复杂。
  • 无法直接对激活状态进行样式设置等操作，需要额外编写逻辑来实现类似功能。

NavLink

• 优势：
  • 专门用于导航链接，内置了激活状态管理功能，当链接对应的路由匹配时，会自动应用特定的样式或类名，方便进行视觉反馈。
  • 可以通过配置属性精确控制激活状态的匹配规则，例如 exact 属性用于精确匹配，更灵活地处理不同层级路由的激活逻辑。
• 劣势：
  • 相对 Link 功能更复杂，有一定的学习成本，因为涉及到激活状态管理相关的属性和配置。
  • 只能用于应用内部的路由导航，不适合跳转到外部链接场景。

优化状态管理逻辑

• 基于Link：
  • 可利用React的 useLocation 钩子获取当前路由信息，在组件内部手动比较当前路由和 Link 的目标路由，根据比较结果执行相应业务逻辑。例如：

import React from 'react';
import { Link, useLocation } from'react-router-dom';

const MyLink = ({ to, children }) => {
  const location = useLocation();
  const isActive = location.pathname === to;
  return (
    <Link to={to}>
      {isActive? `[${children}]` : children}
    </Link>
  );
};

export default MyLink;

• 基于NavLink：
  • 充分利用 NavLink 的 activeClassName、activeStyle 等属性设置激活状态的样式，同时结合 exact 等属性精确控制激活逻辑。例如：

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

const MyNavLink = ({ to, children }) => {
  return (
    <NavLink to={to} exact activeClassName="active">
      {children}
    </NavLink>
  );
};

export default MyNavLink;

• 还可以通过 onClick 等事件处理函数，在链接点击时结合激活状态执行特定业务逻辑。