useNavigate钩子与onWheel事件配合的路由多次切换bug修复咨询

问题核心：滚轮滚动时onWheel事件会连续触发多次，每次deltaY>0都会执行navigate("/newRoute")，导致路由栈中被插入了多条相同的路由记录，所以返回时需要点击对应次数才能回到原页面。

以下是几种可行的修复方案：

方案1：判断当前路由，避免重复跳转 #

直接通过useLocation获取当前路由路径，只有当目标路由和当前路由不一致时才执行跳转：

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

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

  const handleWheel = (e) => {
    // 仅当当前路由不是目标路由时才跳转
    if (e.deltaY > 0 && location.pathname !== "/newRoute") {
      navigate("/newRoute");
    }
  };

  return <div onWheel={handleWheel}>滚动触发跳转</div>;
};

方案2：防抖处理，限制短时间内仅触发一次跳转 #

利用定时器实现防抖，避免滚轮连续滚动时多次触发跳转：

import { useNavigate } from 'react-router-dom';
import { useCallback, useRef } from 'react';

const YourComponent = () => {
  const navigate = useNavigate();
  const debounceTimer = useRef(null);

  const handleWheel = useCallback((e) => {
    if (e.deltaY > 0) {
      // 清除之前的定时器，确保只有最后一次滚动触发跳转
      if (debounceTimer.current) clearTimeout(debounceTimer.current);
      debounceTimer.current = setTimeout(() => {
        navigate("/newRoute");
      }, 300); // 可根据需求调整防抖时长
    }
  }, [navigate]);

  return <div onWheel={handleWheel}>滚动触发跳转</div>;
};

方案3：添加跳转状态标记，临时禁用触发逻辑 #

通过状态标记是否正在跳转，跳转过程中不再响应滚轮事件：

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

const YourComponent = () => {
  const navigate = useNavigate();
  const [isNavigating, setIsNavigating] = useState(false);

  const handleWheel = (e) => {
    if (e.deltaY > 0 && !isNavigating) {
      setIsNavigating(true);
      navigate("/newRoute");
      // 跳转后延迟重置标记，避免短时间内重复触发
      setTimeout(() => setIsNavigating(false), 500);
    }
  };

  return <div onWheel={handleWheel}>滚动触发跳转</div>;
};

方案选择建议 #

• 优先选方案1，逻辑最简单直接，从根源避免重复添加路由记录；
• 若需要避免用户轻微滚动就触发跳转，可选方案2；
• 方案3适合有特殊交互需求，需要短暂禁用滚轮触发的场景。

内容的提问来源于stack exchange，提问作者Brian Cabrera