如何在用户未登录react时隐藏导航

import React, { useState, useEffect } from 'react';

// 导航组件
const Navigation = () => {
  const [isUserLoggedIn, setIsUserLoggedIn] = useState(false);

  useEffect(() => {
    // 监听用户登录状态的变化
    // 可以在这里调用API接口或其他方式获取用户登录状态
    // 并更新isUserLoggedIn的值
  }, []);

  return (
    <nav>
      {isUserLoggedIn ? (
        // 用户已登录，显示完整导航栏
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Profile</li>
          <li>Logout</li>
        </ul>
      ) : (
        // 用户未登录，隐藏导航栏
        null
      )}
    </nav>
  );
};

// 应用程序组件
const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <Navigation />
      {/* 其他组件 */}
    </div>
  );
};

export default App;