如何高效使用React Router Link？解决导航栏重复跳转问题

嘿，我在日常开发React项目时经常和react-router的Link组件打交道，刚好碰到过你提到的重复跳转问题，来分享下我的实用技巧和解决方案：

• 灵活运用to属性的多种写法：除了直接写字符串路径，还可以传递一个对象，比如to={{ pathname: '/leaderboards', search: '?sort=asc', state: { fromHome: true } }}。这种方式能轻松携带查询参数和页面状态，比如从列表页跳转到详情页时传递选中项的ID，非常实用。
• 轻松实现激活状态样式：如果需要给当前活跃的导航项加高亮，不用手动判断路径——可以用NavLink替代Link，它自带isActive状态，能直接给激活的链接添加自定义类名。比如：

  <NavLink className={({ isActive }) => `link ${isActive ? 'active-link' : ''}`} to="/leaderboards">
    <Home />
  </NavLink>
  

• 优化性能，避免不必要重渲染：如果在长列表里渲染大量Link组件，记得用React.memo包裹自定义的Link组件，或者确保父组件传递的props是稳定的，防止无意义的重渲染拖慢页面。
• 用replace属性管理历史记录：有些场景下（比如登录后跳转首页），不希望用户回退到之前的页面，可以给Link加上replace={true}，这样会替换当前的历史记录条目，而不是新增一条。

你说的这种情况确实挺常见的——明明已经在首页，点击首页按钮还是会触发跳转，不仅没必要，还可能导致页面无意义的重渲染。这里有两种靠谱的解决方法：

方法一：封装一个自定义的条件跳转Link组件 #

自己封装一个组件，判断当前路径和目标路径是否一致，一致就阻止跳转：

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

// 自定义条件跳转Link
const SmartLink = ({ to, children, ...props }) => {
  const location = useLocation();
  // 判断当前路径是否和目标路径匹配
  const isCurrentRoute = location.pathname === (typeof to === 'string' ? to : to.pathname);

  const handleClick = (e) => {
    if (isCurrentRoute) {
      e.preventDefault(); // 阻止默认跳转行为
      // 可选：如果需要点击后回到页面顶部，可以加这行
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  };

  return (
    <Link
      className={`link ${isCurrentRoute ? 'active' : ''}`}
      to={to}
      onClick={handleClick}
      {...props}
    >
      {children}
    </Link>
  );
};

// 使用方式和普通Link完全一样
<SmartLink to="/leaderboards">
  <Home />
</SmartLink>

方法二：基于NavLink改造（更简便） #

因为NavLink已经自带激活状态判断，我们可以直接在它的onClick事件里加阻止逻辑：

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

const CustomNavLink = ({ to, children, ...props }) => {
  const location = useLocation();

  const handleClick = (e) => {
    const targetPath = typeof to === 'string' ? to : to.pathname;
    if (location.pathname === targetPath) {
      e.preventDefault();
      // 可选：平滑滚动到顶部
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  };

  return (
    <NavLink
      className={({ isActive }) => `link ${isActive ? 'active' : ''}`}
      to={to}
      onClick={handleClick}
      {...props}
    >
      {children}
    </NavLink>
  );
};

// 使用示例
<CustomNavLink to="/leaderboards">
  <Home />
</CustomNavLink>

这两种方法都能完美解决重复跳转的问题，而且封装后的组件可以在整个项目里复用，非常方便。

内容的提问来源于stack exchange，提问作者vismay yerunkar