如何解决登录/注册后条件渲染导致NotFound组件闪烁问题？

问题根源 #

登录成功后，Redux状态先更新id字段，此时Login组件会立刻渲染<NotFound/>，随后useEffect检测到isSuccess才执行页面跳转，这短暂的渲染间隔导致了闪烁现象。

解决方案 #

1. 修正Login组件的渲染逻辑

移除id !== null时返回NotFound的错误逻辑，改为结合加载状态、登录状态做合理渲染与跳转：

const Login = () => {
    const router = useRouter()
    const dispatch = useDispatch<AppDispatch>()
    const userState = useSelector(authState)
    const { isError, isSuccess, message, id, isLoading } = userState

    const handleError = () => {
        showNotification({
            title: "Error ",
            message: `${message}`,
            color: 'red',
            icon: <AlertCircle />,
        })
    }

    const handelSubmit = () => {
        dispatch(login(userInfo))
    }

    useEffect(() => {
        // 处理错误提示并重置状态
        if (isError) {
            handleError()
            dispatch(reset())
        }
        // 登录成功后跳转并重置状态
        if (isSuccess) {
            router.push("/")
            dispatch(reset())
        }
        // 用户已登录时直接跳转首页
        if (id !== null) {
            router.push("/")
        }
    }, [isError, isSuccess, id])

    // 加载中显示Loading组件
    if (isLoading) {
        return <Loading />
    }

    // 未登录状态下显示登录组件
    return <LoginComponent />
}

2. 完善Redux状态重置逻辑

登录成功跳转后调用reset，避免再次进入Login页面时残留isSuccess等状态，导致逻辑异常。

3. 可选：路由层面添加登录校验（推荐）

在路由拦截层直接校验登录状态，已登录用户无法访问登录页面，从根源避免此类问题。以Next.js为例：

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token')?.value || localStorage.getItem('token')
  // 已登录用户访问登录页时直接重定向到首页
  if (token && request.nextUrl.pathname === '/login') {
    return NextResponse.redirect(new URL('/', request.url))
  }
}

为什么之前的Loading方案无效？ #

之前的代码中isLoading仅在请求pending阶段为true，登录成功后isLoading会被立即设为false，此时id已更新，组件会直接渲染NotFound，完全跳过了Loading的判断逻辑。修正后的逻辑覆盖了加载中、已登录等所有场景，彻底避免了NotFound的意外渲染。

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