React中已认证用户访问/login路由时避免登录表单闪烁的方案

问题描述 #

在React应用的<Login />组件中，通过useEffect钩子检查用户是否持有有效JWT，若有效则重定向至"/"路由。但每次访问"/login"路由时，登录表单会先闪烁一秒，之后才跳转到首页。

尝试在App.js的路由中使用条件路由，通过检查JWT有效性决定重定向首页还是渲染<Login />组件：

<Route path="/login" element={ isValid ? <Navigate to="/" replace /> : <Login /> }

但问题仍存在，依然有闪烁现象。询问是否有办法避免这种闪烁，或是这属于正常情况。

解决方法 #

原本在useEffect中使用Promise验证令牌，再通过useState钩子设置用户认证状态。但发现若在验证完成前返回加载组件：

if (authState === undefined) return <Loading />

此时useEffect中的验证逻辑无法执行，无法检查JWT和调用setAuthState(true)，会卡在加载组件。

将Promise中的代码替换为异步函数，通过await获取值并设置认证状态后，问题得以解决。

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