使用Firebase登录后无法跳转至其他页面，始终重定向到仪表盘该如何解决

问题原因 #

• useEffect依赖数组错误添加了user变量：你每次调用setUser(user)都会触发user状态变更，进而导致useEffect重复执行，每次执行只要检测到已登录用户就会触发重定向到/dashboard
• 跳转逻辑缺少判断条件：当前逻辑是只要检测到用户处于登录状态，不管用户当前在哪个页面、有没有主动跳转需求，都会强制切到仪表盘，自然无法访问其他登录后可访问的页面

修复方案 #

1. 调整useEffect依赖数组：Firebase的onAuthStateChanged监听器只需要在组件挂载时注册1次即可，依赖数组改为空数组[]，避免重复注册监听器、重复触发跳转逻辑。
2. 补充跳转判定条件：仅在「用户刚完成登录（即从无登录状态变为有登录状态）」且「当前处于登录/注册等公开页面」时才触发跳转到仪表盘的逻辑，不要全局强制跳转。
3. 新增监听器卸载逻辑：组件销毁时主动取消Firebase的状态监听，避免内存泄漏。

修正后代码示例 #

const [loading,setLoading] = useState(true);
const [user,setUser] = useState(null);
const history = useHistory();
const currentPath = window.location.pathname; // 获取当前访问路径

useEffect(()=>{
    // 保存监听器卸载函数
    const unsubscribe = firebase.auth().onAuthStateChanged((user)=>{
        setUser(user);
        setLoading(false);
        // 仅当用户已登录 + 当前处于登录/注册等公开页时，才跳转到仪表盘
        if(user && ['/login', '/register'].includes(currentPath)) {
            history.push("/dashboard");
        }
    })
    // 组件卸载时销毁监听器
    return () => unsubscribe();
},[history]);

如果需要更规范的权限控制，可以拆分路由为公开路由（不需要登录即可访问：登录、注册、站点首页等）和私有路由（必须登录才能访问：仪表盘、个人中心等），单独封装私有路由组件做登录校验，未登录用户访问私有路由时跳登录页，登录成功后返回用户原本要访问的页面即可。

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