PrivateRoute 在我的 Firebase Auth 上下文中闪烁

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

所以我找到了一个有点厚颜无耻的解决方案。我不会 post 我的解决方案，但基本上，我将 return 语句 return children 包装在 PrivateRoute 函数中，并使用用户对象中特定项目的 if 语句。这可以防止任何 return 和 'solves' 闪烁。

PrivateRoute 在我的 Firebase Auth 上下文中闪烁

PrivateRoute Flickering with my Firebase Auth Context

firebase

reactjs