在您的程式碼中，只要會話或路由器的值發生變更（useEffect 的第二個參數），就會執行 useEffect。因此，if 和 else 都不會在 useEffect 的同一次運行中執行，儘管是在可能快速連續執行的兩次不同運行中執行。

這是實現您所追求的目標的一種方法。

1. 使用 useState 建立和管理變數的狀態
2. 在 useEffect 中，透過套用邏輯檢查會話來設定（或不設定）狀態
3. 在回傳中呈現目前頁面或顯示登入頁面。

範例實作：

const App = (props) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  useEffect(()=>{
    //apply the logic and set the state
    if(logic) setIsLoggedIn(true);
  },[]) 
  
  return  {isLoggedIn ? <ActiveApp /> : <Login />}

}

終於，我找到了根本原因。

它來自 supabase auth helper，它是一個非同步函數，它不包含是否正在載入或錯誤的狀態，這表示它在開始（這表示它正在載入）。

解決這個問題的簡單方法是直接使用useSessionContext。 session 仍將以非同步方式獲取，但可以透過同步方式取得isLoading 和error 狀態來解決此問題，並且它們可用於useEffect 內的條件分支。

新程式碼將如下所示：

  import { useSessionContext } from '@supabase/auth-helpers-react'
  const {isLoading, session} = useSessionContext()
  useEffect(() => {

    if (isLoading) {
      console.debug('show loading page')
    }
    else if (session) {
      console.debug('stay in page')
    } 
    else {
      console.debug('goto login')
      router.push('/login').then(
        () => {
          console.debug('goto login done')
        }
      )
    }
  }, [session, isLoading, router])