React中history.push触发Throttling navigation循环警告如何修复

问题根源 #

你遇到的浏览器导航节流警告，本质是页面出现了无限循环跳转：Login组件反复跳转到/dashboard，而/dashboard的路由守卫又反复重定向回Login页，短时间内多次导航触发了浏览器防崩溃机制。

核心错误点有3个：

1. 鉴权判断逻辑错误：你从utils/auth导入的isAuthenticated是工具函数，直接作为判断条件时，函数本身属于Truthy值，判断结果永远为true，所以每次Effect执行都会触发跳转。
2. 路由逻辑冲突：/dashboard的路由鉴权判断和Login组件的判断逻辑不一致，比如Login侧判定已登录跳转到仪表盘，但仪表盘的路由守卫判定未登录又跳回Login页，形成死循环。
3. Effect依赖不合理：原有依赖项中的clearErrors如果引用不稳定，会导致Effect反复执行，重复触发跳转逻辑；你改成空数组也没用，是因为首次渲染就会执行一次跳转，仍然会触发循环。

修复方案 #

第一步：修正鉴权判断逻辑

先调用isAuthenticated函数拿到实际的布尔值鉴权结果，不要直接用函数本身做判断。

第二步：调整跳转逻辑和依赖项

优先用history.replace代替history.push，避免登录后点后退又回到Login页，同时补充正确的依赖项。

第三步：对齐路由守卫逻辑

确保/dashboard的路由鉴权判断规则和Login组件完全一致，避免两边判定结果冲突。

修复后代码示例 #

import { login, resetState } from "../../store/auth/authActions";
import { isAuthenticated } from "../../utils/auth";

const Login = ({ history }) => {
  const dispatch = useDispatch();
  // 提前拿到鉴权结果，是布尔值
  const authed = isAuthenticated();

  //joi schema
  ....

  //react hook form setup
  const {
    register,
    handleSubmit,
    setError,
    clearErrors,
    formState: { errors },
  } = useForm({
    resolver: joiResolver(schema),
  });

  useEffect(() => {
    dispatch(resetState(clearErrors));
    if (authed) {
      // 用replace代替push，避免残留登录页历史记录
      history.replace("/dashboard");
    }
  }, [clearErrors, dispatch, history, authed]); // 把鉴权结果加入依赖

  const onSubmit = (data) => {
    dispatch(resetState(clearErrors));
    dispatch(login(data));
  };

  // 全局状态
  const serverSideErrors = useSelector((state) => state.auth.errors);

  useEffect(() => {
    Object.entries(serverSideErrors).forEach(([i, v]) => {
      setError(i, {
        message: v[0],
      });
    });
  }, [serverSideErrors, setError]);

return (...)

export default Login;

如果你的鉴权状态会动态变化，建议把isAuthenticated的结果存在全局状态里，通过useSelector获取，确保状态变化时能触发Effect重新执行：

// 替换原来的isAuthenticated调用
const authed = useSelector(state => state.auth.isAuthenticated);

内容的提问来源于stack exchange，提问作者Aayush Dahal