loggedIn更改导航链接时的Javascript React会话存储

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

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [loggedIn, setLoggedIn] = useState(false);

  const login = () => {
    setLoggedIn(true);
  };

  const logout = () => {
    setLoggedIn(false);
  };

  return (
    <AuthContext.Provider value={{ loggedIn, 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 Navigation = () => {
  const { loggedIn, logout } = useContext(AuthContext);

  return (
    <nav>
      <ul>
        <li>
          <a href="/">Home</a>
        </li>
        {loggedIn ? (
          <li>
            <a href="/profile">Profile</a>
          </li>
        ) : (
          <li>
            <a href="/login">Login</a>
          </li>
        )}
        <li>
          <button onClick={logout}>Logout</button>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;