React Router重复点击同一路由链接的问题解决咨询

这个问题在React Router开发里挺常见的——默认的Link组件每次点击都会执行history.push()操作，哪怕你已经处于目标路由页面，它还是会往浏览器历史栈里新增一条完全相同的记录，导致你点返回按钮得重复好几次才能退出这个页面。下面给你几个实用的解决思路：

方法1：用NavLink替代Link（最推荐的方案） #

NavLink是Link的增强版本，它会自动检测当前路由是否和目标路由匹配。如果已经处于该路由页面，点击时不会触发跳转行为，自然也就不会重复添加历史记录。

假设你的Header组件里原本是这么写普通Link的：

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

// 原来的写法
<Link to="/category">商品分类</Link>

只需要替换成NavLink就行，还能顺便给当前活跃的路由加样式：

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

// 修改后的写法
<NavLink 
  to="/category" 
  className={({ isActive }) => isActive ? "active-nav-link" : ""}
>
  商品分类
</NavLink>

方法2：手动阻止重复跳转（适合不想换组件的场景） #

如果因为某些原因你不想替换Link组件，可以在点击事件里手动判断当前路径，一致就阻止默认跳转行为：

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

const YourHeaderComponent = () => {
  const location = useLocation();

  const handleCategoryClick = (e) => {
    // 检查当前是否已经在目标路由
    if (location.pathname === '/category') {
      e.preventDefault(); // 阻止默认跳转
    }
  };

  return (
    <Link to="/category" onClick={handleCategoryClick}>商品分类</Link>
  );
};

方法3：用useNavigate的replace模式（函数式跳转场景） #

如果是通过按钮点击等函数式方式跳转路由，可以使用navigate的replace选项，它会替换当前的历史记录，而不是新增一条：

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

const YourComponent = () => {
  const navigate = useNavigate();

  const goToCategory = () => {
    // 使用replace模式替换当前历史记录
    navigate('/category', { replace: true });
  };

  return (
    <button onClick={goToCategory}>商品分类</button>
  );
};

额外检查：你的路由配置没问题 #

看了你贴的App代码，/category路由已经加上了exact属性，这能避免和/category/powders这类子路由冲突，这块的配置是正确的，不用调整。

总结下来，最省心的就是用NavLink，它帮你封装了所有路由匹配的逻辑，不用自己写额外判断代码~

内容的提问来源于stack exchange，提问作者Meylis Muhamedov