PrivateRoute 在我的 Firebase 身份驗證上下文中閃爍

Question

在使用 AuthContext 時，我的私人路由閃爍時出現問題。 以下是我的私人路線的代碼：

import React from 'react';
import { Navigate } from 'react-router-dom';
import { UserAuth } from '../../Context/AuthContext';

const PrivateRoute =  ({ children }) => {
  const { user } = UserAuth();
  
  if (!user) {
    return <Navigate to='/login' />;
  }
  return children;
};


export default PrivateRoute;

沒有個人信息顯示，因為用戶在 Auth Context 中被初始化為 {}。 但我仍然可以看到頁面和導航欄。 有人有解決方案嗎？

此外，下面是 AuthContext.js：

import { createContext, useContext, useEffect, useState } from 'react';
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
} from 'firebase/auth';
import { auth } from '../../firebase';

const UserContext = createContext();

export const AuthContextProvider = ({ children }) => {
  const [user, setUser] = useState({});

  const createUser = (email, password) => {
    return createUserWithEmailAndPassword(auth, email, password);
  };

   const signIn = (email, password) =>  {
    return signInWithEmailAndPassword(auth, email, password)
   }

  const logout = () => {
      return signOut(auth)
  }

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      //console.log(currentUser);
      setUser(currentUser);
    });
    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <UserContext.Provider value={{ createUser, user, logout, signIn }}>
      {children}
    </UserContext.Provider>
  );
};

export const UserAuth = () => {
  return useContext(UserContext);
};

Answer 1

所以我找到了一個有點厚顏無恥的解決方案。 我不打算發布我的解決方案，但基本上，我將返回語句return children包裝在 PrivateRoute 函數中，並使用用戶對象中特定項目的 if 語句。 這可以防止任何返回並“解決”閃爍。