React中Firebase Auth登录跳转触发无限循环，报Throttling导航错误求助

你遇到的这个无限循环+浏览器节流提示问题，核心原因有两个：

1. 重复监听+无清理：你的useEffect没有设置依赖数组，也没有清理Firebase的auth状态监听，导致每次组件渲染都会新增一个监听，多个监听叠加后反复触发导航操作。
2. 无判断的重复导航：当用户已经处于根路径/时，代码依然执行props.history.push("/")，这会触发路由重新渲染组件，进而再次触发监听和导航，形成死循环。

下面是修复后的完整代码，我标注了关键改动点：

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import "semantic-ui-css/semantic.min.css";
import App from "./App";
import firebase from "firebase";
import { BrowserRouter, Switch, Route, withRouter } from "react-router-dom";
import Login from "./components/Login";
import Register from "./components/Register";

const Root = props => {
  useEffect(() => {
    // 保存监听函数引用，用于后续清理
    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      // 新增判断：只有当前不在根路径时才执行重定向
      if (user && props.location.pathname !== "/") {
        props.history.push("/");
      }
    });

    // 清理函数：组件卸载时移除auth监听，避免内存泄漏和重复监听
    return () => unsubscribe();
  }, [props.location.pathname, props.history]); // 添加依赖数组，仅当路径或history变化时重新执行

  return (
    <Switch>
      <Route exact path="/" component={App} />
      <Route path="/login" component={Login} />
      <Route path="/register" component={Register} />
    </Switch>
  );
};

const RootWithAuth = withRouter(Root);

ReactDOM.render(
  <BrowserRouter>
    <RootWithAuth />
  </BrowserRouter>,
  document.getElementById("root")
);

关键改动说明： #

• 添加监听清理逻辑：调用firebase.auth().onAuthStateChanged会返回一个卸载监听的函数，我们在useEffect的返回值中执行它，确保组件卸载时移除监听，避免重复监听和内存泄漏。
• 设置依赖数组：将props.location.pathname和props.history加入依赖数组，这样只有当路径变化或者history对象更新时，才会重新设置监听，避免不必要的重复执行。
• 增加路径判断：在执行push前先检查当前路径是否已经是/，如果已经在目标路径就不再触发导航，从根源上切断循环触发的链条。

这样修改后，用户登录时只会在非根路径下重定向一次，组件也不会重复添加监听，就能解决无限循环和浏览器节流的问题了。

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