我正在开发一个 React 应用程序，我需要通过注销用户并将其重定向回登录页面来处理用户不活动的情况。但是，我遇到了页面渲染两次的问题...

我正在开发一个 React 应用程序，我需要处理用户不活动的情况，方法是注销用户，然后将他们重定向回登录页面。但是，我遇到了一个问题，即页面渲染两次，导致明显的闪烁或延迟。

该组件如下：

export const LogoutInactivityTimeout = () => {
  const { search, pathname } = useLocation()
  const { loginWithInactiveTimeout, logout } = useAuthenticationContext()
  const redirect = new URLSearchParams(search).get('redirect') ?? ''
  const isReturningFromLogout =
    new URLSearchParams(search).get('isReturningFromLogout') === 'true' || false

  useEffect(() => {
    if (!isReturningFromLogout) {
      logout({
        returnTo: `${window.location.origin}${pathname}?redirect=${redirect}&isReturningFromLogout=true`,
      })
    } else {
      loginWithInactiveTimeout(redirect)
    }
  }, [
    logout,
    loginWithInactiveTimeout,
    isReturningFromLogout,
    pathname,
    redirect,
  ])

  return (
    <AuthLoadingPage>
...
    </AuthLoadingPage>
  )
}

当 isReturningFromLogout 为 false 时，将触发 logout 函数，该函数将用户注销并将其重定向回同一组件，并将 isReturningFromLogout 参数设置为 true。此时，将调用 loginWithInactiveTimeout 函数将用户定向到登录页面。

这种方法会导致页面渲染两次——一次是在注销过程中，另一次是在登录过程中。这会给用户体验带来闪烁，而这正是我想要避免的。

如何处理注销和登录过程，以确保在注销完成后调用登录，以防止页面渲染两次？

我尝试将注销函数包装在 Promise 中，并使用 .then()，但由于 Auth0 的注销函数没有返回 Promise，因此这种方法无法按预期工作。

在 React 中是否有更有效的方法来处理这个过程，或者我应该考虑完全不同的方法？