使用AuthContext处理react应用程序的注销

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

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const login = () => {
    // 处理登录逻辑
    setIsLoggedIn(true);
  }

  const logout = () => {
    // 处理注销逻辑
    setIsLoggedIn(false);
  }

  return (
    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export { AuthContext, AuthProvider };

import React from 'react';
import { AuthProvider } from './AuthContext';
import App from './App';

const Root = () => {
  return (
    <AuthProvider>
      <App />
    </AuthProvider>
  );
}

export default Root;

import React, { useContext } from 'react';
import { AuthContext } from './AuthContext';

const Navbar = () => {
  const { isLoggedIn, logout } = useContext(AuthContext);

  return (
    <nav>
      {isLoggedIn ? (
        <ul>
          <li>首页</li>
          <li>个人资料</li>
          <li onClick={logout}>注销</li>
        </ul>
      ) : (
        <ul>
          <li>首页</li>
          <li>登录</li>
          <li>注册</li>
        </ul>
      )}
    </nav>
  );
}

export default Navbar;