我试图有我的导航栏更新，以显示用户登录信息后，他们尝试登录，这是成功的。以下是相关的代码文件：
App.js

class App extends Component {
  render(){
    return (
      <div>
        <div className="App">
          <header className="App-header">
            <NavBar />
            <Main />
          </header>
        </div>
      </div>
    );
  }
}

export default App;

NavBar.js

const NavBar = () => {
  const [userInfo, SetUserInfo] = useState();

  useEffect(() => {
    SetNavBar(null);
  }, [])

  function SetNavBar(element){
    var user = auth.currentUser;
    console.log(auth.currentUser);

    if (user){
      var userInfo = 
        React.createElement('div', {id : 'userDiv'},
          React.createElement('span', {id : 'userDisplayName'}, user.email),
          React.createElement('span', {id : 'signoutSpan'}, 
            '(', 
            React.createElement('button', {id : 'signoutButton', onClick : (e) => SignOutUser(e.target)}, 'Signout'),
            ')'
          )
        );
      SetUserInfo(userInfo);
    }
    else if(element != null && element.nodeName === 'A'){
      var urlTO = element.href;
        
      if(!urlTO.includes("login") && !urlTO.includes("signup")){
        var userLoginSignupElement = 
          React.createElement('span', {id : 'loginSignupOptions'}, 
            React.createElement(Link, {to : '/login', onClick : (e) => SetNavBar(e.target)}, 'Login'), 
            '/',
            React.createElement(Link, {to : '/signup', onClick : (e) => SetNavBar(e.target)}, 'Signup')
          );
      }
      else{
        var userLoginSignupElement = null;
      }
      SetUserInfo(userLoginSignupElement);
    }
    else{
      var userLoginSignupElement = 
        React.createElement('span', {id : 'loginSignupOptions'}, 
          React.createElement(Link, {to : '/login', onClick : (e) => SetNavBar(e.target)}, 'Login'), 
          '/',
          React.createElement(Link, {to : '/signup', onClick : (e) => SetNavBar(e.target)}, 'Signup')
        );
      SetUserInfo(userLoginSignupElement);
    }
  }

  async function SignOutUser(element){
    try{
      await signOut(auth);
      SetNavBar(null)
    }
    catch(err){
      console.log(err);
    }
  }

  return (
    <div>
      <nav id='navBar'>
        <div id='logoTitleDiv'>
          <img id='navBarLogo' src={logo} alt='Skeeters logo.'></img>
          <Link to='/' onClick={e => SetNavBar(e.target)}>
            <h2 id='pageHeader'>DJSkeeterB</h2>
          </Link>
        </div>
        {userInfo}
      </nav>
    </div>
  );
}

export default NavBar;

Main.js

const Main = () => {
    return (
        <div id='main'>
            <Routes>
                <Route exact path='/' element={<SongRequests/>}/>
                <Route exact path='/upcoming' element={<Upcoming/>}/>
                <Route exact path='/signup' element={<Signup/>}/>
                <Route exact path='/login' element={<Login/>}/>
            </Routes>
        </div>
    );
}

export default Main;

Login.js

const Login = () => {
  const [navigateToHome, SetNavigateToHome] = useState(false);
  const [userEmail, SetUserEmail] = useState('');
  const [userPassword, SetUserPassword] = useState('');

  const userEmailRef = useRef('');
  userEmailRef.current = userEmail;

  const userPasswordRef = useRef('');
  userPasswordRef.current = userPassword;

  const LoginToFirebase = async () => {
    try {
      await signInWithEmailAndPassword(auth, userEmailRef.current, userPasswordRef.current);
      console.log(auth.currentUser);
      document.getElementById('emailInput').innerHTML = '';
      document.getElementById('passwordInput').innerHTML = '';

      SetUserEmail('');
      SetUserPassword('');

      SetNavigateToHome(true);
    } catch (err) {
      console.error(err);
    }
  };

  if(navigateToHome === true){
    return <Navigate to='/'/>;
  }
  return (
      <div id='loginDiv'>
        <div>
          <h2>Login</h2>
        </div>
        <div>
          <label>Email: </label>
          <input id='emailInput' type='email' placeholder='example@gmail.com' onChange={e => SetUserEmail(e.target.value)}/>
        </div>
        <div>
          <label>Password: </label>
          <input id='passwordInput' type='password' placeholder='Password' onChange={e => SetUserPassword(e.target.value)}/>
        </div>
        <button onClick={e => LoginToFirebase()}>Submit</button>
        <div>
          <span id='alreadySignedUpSpan'>
            <Link to='/signup'>Not registered? Signup here</Link>
          </span>
        </div>
      </div>
  );
}

export default Login;

基本上我让我的应用程序一直显示导航栏，根据页面或用户身份验证的不同，它会更新为不同的。组件Main当前使用react-router-dom链接几个页面。用户登录或注册Login.js或Signup.js后，他们会被重定向到主页。他们使用firebase身份验证成功登录。重定向后，他们降落在主页上，但导航栏没有更新，因为我不知道如何调用Login.js中发生的事情的状态变化，以影响NavBar.js。
导航栏似乎无法知道这是一个成功的身份验证。我尝试将auth和auth.currentUser视为状态，以查看当它们更新时，是否可以以useEffect(() => {}, [auth])的方式使用它们来调用NavBar.js中的SetNavBar函数。
如何在函数LoginToFirebase()函数的末尾更新组件NavBar？