React Router v6.0.2在useEffect中调用navigate导致页面无响应如何解决

核心问题 #

你代码里的useEffect没有声明依赖数组，导致每次组件重渲染都会重新执行：

• 只要用户处于登录状态，useEffect每次运行都会调用setAuthenticated(true)和navigate('home')
• setAuthenticated会触发组件重渲染，重渲染后又会再次执行useEffect，形成无限死循环，最终导致页面无响应

其他需要修正的问题 #

• onAuthStateChanged会返回一个取消监听的清理函数，你需要在useEffect的返回值中调用它，避免组件卸载后出现内存泄漏
• navigate传入的相对路径会基于当前路由地址拼接，建议改为绝对路径/home，避免跳转到错误的路由地址
• 按钮点击的navigate('home')同样建议改为绝对路径，避免潜在的路由跳转错误

修复后的代码片段 #

仅需要修改App组件内的useEffect部分即可：

useEffect(() => {
  // 接收取消监听的函数
  const unSubscribeAuth = onAuthStateChanged(auth, (user) => {
    if (user) {
      setAuthenticated(true);
      // 改为绝对路径避免跳转错误
      navigate('/home')
    } else {
      setAuthenticated(false);
    }
  })
  // 返回清理函数，组件卸载时自动取消监听
  return unSubscribeAuth
// 添加依赖数组，useEffect只会在组件首次挂载、navigate变动时运行（navigate本身是稳定值，实际只会执行一次）
}, [navigate])

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