在react导航中具有注销功能的抽屉

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

// 导航组件
const Navigation = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/profile">个人资料</Link>
        </li>
        <li>
          <Link to="/settings">设置</Link>
        </li>
      </ul>
    </nav>
  );
};

// 抽屉组件
const Drawer = ({ isOpen, onClose, onLogout }) => {
  return (
    <div className={`drawer ${isOpen ? 'open' : ''}`}>
      <button onClick={onClose}>关闭</button>
      <button onClick={onLogout}>注销</button>
    </div>
  );
};

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

// 个人资料组件
const Profile = () => {
  return <h1>这里是个人资料页面</h1>;
};

// 设置组件
const Settings = () => {
  return <h1>这里是设置页面</h1>;
};

const App = () => {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);

  const handleDrawerClose = () => {
    setIsDrawerOpen(false);
  };

  const handleLogout = () => {
    // 执行注销操作，例如清除登录凭证或会话信息
    // 重定向到登录页面或其他适当的页面
  };

  return (
    <Router>
      <Navigation />
      <button onClick={() => setIsDrawerOpen(true)}>打开抽屉</button>
      <Drawer isOpen={isDrawerOpen} onClose={handleDrawerClose} onLogout={handleLogout} />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/profile" component={Profile} />
        <Route path="/settings" component={Settings} />
      </Switch>
    </Router>
  );
};

export default App;