条件渲染问题：登录/注销按钮在 React 中无法正常工作-PHP中文网问答

我正在开发一个 React 应用程序，我需要根据用户当前的身份验证状态有条件地呈现“登录”或“注销”按钮。但是，我遇到了条件语句未按预期工作的问题。即使用户登录后，也只显示登录按钮，除非同时显示两个按钮，否则我无法注销，这不是所需的行为。


                    {
                        isAuthenticated ?
                        ()
                        :
                        ()
                    }

import React from 'react'
import { FaTruckMoving } from 'react-icons/fa';
import { AiOutlineHeart, AiOutlineUser } from 'react-icons/ai'
import { BsBagCheck } from 'react-icons/bs'
import { CiLogin, CiLogout } from 'react-icons/ci'
import './Nav.css'
import { Link } from 'react-router-dom';
import { useAuth0 } from "@auth0/auth0-react";

const Nav = () => {
    const { loginWithRedirect, logout, user, isAuthenticated  } = useAuth0();
    let authButton;

  if (isAuthenticated) {
    authButton = (
      
    );
  } else {
    authButton = (
      
    );
  }
return (
    <>
        
            
                     
            
             
                Free Shipping for Orders upto Rs.1000 
            
        

        
            
                
                    
                
                
                    
                    
                
                
                    {
                        isAuthenticated && 
                        (
                            
                                
                                    
                                
                                Hello, {user.name}
                            
                        )
                    }
                    
                        
                        
                    
                
            
        

        
            
                
                    
                        
                            Home
                        
                        
                            Product
                        
                        
                            About
                        
                        
                            Contact
                        
                    
                

                
                    {authButton}
                
            
        
    
)
}

export default Nav

我尝试了上述方法，但结果仍然相同

{ isAuthenticated ? (<button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}><CiLogout /></button>) : (<button onClick={() => loginWithRedirect()}><CiLogin /></button>) }