React+Firebase开发如何正确实现登录后重定向，避免登录页短暂闪烁？

你遇到的闪烁问题本质是缺少「登录状态校验中」的中间状态：

• Firebase的onAuthStateChanged是异步回调，页面刚初始化时还没拿到本地存储的Auth缓存，无法判断用户是否已经登录
• 你把isLoggedIn默认值设为false，首次渲染直接触发了到/login的重定向，等回调拿到当前用户更新状态后才会再次跳转到/home，两次重定向的时间差就会造成登录页短暂闪现的问题。

需要同时调整状态逻辑+优化路由判断逻辑，补充加载状态避免提前重定向：

1. 新增loading状态标记Auth校验是否完成，初始值为true
2. 等onAuthStateChanged回调执行完成后再关闭加载状态，再执行重定向判断
3. 加载过程中渲染加载占位组件，避免渲染错误的路由

修改后的参考代码如下：

const [isLoggedIn, setIsLoggedIn] = useState(false)
// 新增加载状态
const [authLoading, setAuthLoading] = useState(true)

useEffect(() => {
  const unsub = onAuthStateChanged(auth, (currentUser) => {
    setIsLoggedIn(!!currentUser) // 统一转成布尔值，避免逻辑判断异常
    setAuthLoading(false) // 校验完成，关闭加载状态
  })
  // 组件卸载时取消监听，避免内存泄漏
  return () => unsub()
}, [])

// 加载过程中渲染占位，不要执行重定向
if (authLoading) {
  return <div>加载中...</div> // 可以替换为自定义的加载动画组件
}

return (
    <Router>
        <Route path="/home" component={SongList} />
        <Route path="/login" component={Auth} />
        {/* 放到路由定义后面，匹配不到对应路径时再走统一重定向逻辑 */}
        {isLoggedIn ? <Redirect to="/home" /> : <Redirect to="/login" />}
    </Router>
)

• 你可以把路由重定向逻辑封装成私有路由组件，后续其他需要登录权限的路由都可以复用，不需要每次都写判断逻辑
• onAuthStateChanged的监听要放在useEffect里，并且返回取消监听的函数，避免组件重复挂载时生成多个监听实例造成内存泄漏

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