在React中向登录用户显示不同的导航栏

import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

// 导航栏组件
const Navbar = ({ isLoggedIn }) => {
  return (
    <nav>
      {isLoggedIn ? (
        <ul>
          <li>首页</li>
          <li>个人资料</li>
          <li>设置</li>
          <li>退出</li>
        </ul>
      ) : (
        <ul>
          <li>首页</li>
          <li>登录</li>
          <li>注册</li>
        </ul>
      )}
    </nav>
  );
};

// 私有路由组件
const PrivateRoute = ({ component: Component, isLoggedIn, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        isLoggedIn ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

// 登录页面组件
const Login = () => {
  return <h1>登录页面</h1>;
};

// 首页组件
const Home = () => {
  return <h1>首页</h1>;
};

// 应用组件
const App = () => {
  const isLoggedIn = false; // 根据实际登录状态设置

  return (
    <Router>
      <Navbar isLoggedIn={isLoggedIn} />
      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
      <PrivateRoute
        path="/profile"
        component={() => <h1>个人资料页面</h1>}
        isLoggedIn={isLoggedIn}
      />
      <PrivateRoute
        path="/settings"
        component={() => <h1>设置页面</h1>}
        isLoggedIn={isLoggedIn}
      />
    </Router>
  );
};

export default App;