为什么用户在导航到不同的页面时变得不确定

Question

我的用户变量是在注册或登录后安装组件后定义的，但在导航到另一个页面时它为空。用户登录后，我将其作为 AuthContext 组件。

  useEffect(() => {      
            const unsubscribe = auth.onAuthStateChanged(user=>{          
                setCurrentUser(user);              
            })
            {console.log(currentUser)}
            return unsubscribe
        })
 const value = {
        signup,
        currentUser,
        logout,
        authError,
        login
    }
    return(
        <AuthContext.Provider value={value}>
            {children}
        </AuthContext.Provider>
    )

这是我的 App.js 组件。

function App() {
  return (
    <Router>
    <div className = "App">
    <AuthProvider>
    
    <Routes>
   
        <Route path="/" element={<Home/>}/>
        <Route element= {<AuthRoute/>}>
          {/* 
          If user is already signed in re-direct to home
          */}
        <Route exact path = "/sign_up" element = {<SignUp/>} />  
        <Route exact path = "/login" element= {<SignIn/>}/>
        </Route>
        <Route exact path="/new_post" element ={<AuthRouteIfLoggedOut>
          <SignUp/>
        </AuthRouteIfLoggedOut>}/>
   
        
        <Route exact path="/about" element={<About/>}/>
    
        
       
    </Routes> 
    </AuthProvider>
    </div>
    </Router>
  );

}

AuthContext 是我的上下文组件。

为什么当我尝试导航到另一个页面时用户未定义或仅在该页面上“退出”？但是当我导航回我的主页时，它已登录并正常工作。导航到不同页面时 currentUser 为 null 的任何原因？

Answer 1

您必须为您的路线缓存用户和提供者逻辑。这是一个例子Authetication in React