Как мне скрыть / показать ссылку React без обновления моей веб-страницы?

Question

Я создал 4 ссылки в заголовке. Домой, Todos, Вход, Выход. Вот что я хочу

1. Ссылки "Домой", "Задачи" и "Выход" доступны только тогда, когда пользователь вошел в систему.

Я использовал sessionStorage, чтобы проверить, вошел ли пользователь в систему или нет, и он отлично работает. Проблема в том, что после входа в систему мне нужно обновить веб-страницу, чтобы отобразить главную, Todos и выйти. Как я могу показать их, не обновляя мою веб-страницу. Значит, после входа в систему мне все равно нужно обновить страницу, и мне это не нравится. Вот образец моего кода

class AuthenticationService {
      successLogin(username, password) {
        console.log("Register Successfull");
        sessionStorage.setItem("authenticatedUser", username);
      }
      successLogout() {
        sessionStorage.removeItem("authenticatedUser");
      }
      isUserLoggedIn() {
        let user = sessionStorage.getItem("authenticatedUser");
        if (user === null) {
          return false;
        } else {
          return true;
        }
      }
    }
    export default new AuthenticationService();

Header.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import AuthenticationService from "../Security/AuthenticationService";

class Header extends Component {
  render() {
    const isUserLoggedIn = AuthenticationService.isUserLoggedIn();
    console.log(isUserLoggedIn);
    return (
      <header>
        <nav className="navbar navbar-expand-md navbar-dark bg-dark">
          <ul className="navbar-nav">
            {isUserLoggedIn && (
              <li>
                <Link className="nav-link" to="/welcome/jarvis">
                  HOME
                </Link>
              </li>
            )}
            {isUserLoggedIn && (
              <li>
                <Link className="nav-link" to="/todos">
                  Todos
                </Link>
              </li>
            )}
          </ul>
          <ul className="navbar-nav navbar-collapse justify-content-end">
            {!isUserLoggedIn && (
              <li>
                <Link className="nav-link" to="/login">
                  Login
                </Link>
              </li>
            )}
            {isUserLoggedIn && (
              <li>
                <Link
                  className="nav-link"
                  to="/logout"
                  onClick={AuthenticationService.successLogout}
                >
                  Logout
                </Link>
              </li>
            )}
          </ul>
        </nav>
      </header>
    );
  }
}

export default Header;

Войти

loginResponse = () => {
    if (this.state.username === "jarvis" && this.state.password === "jarvis") {
      this.setState({ loginStatus: true });
      AuthenticationService.successLogin(
        this.state.username,
        this.state.password
      );
      this.props.history.push(`/welcome/${this.state.username}`);
    } else {
      this.setState({ loginStatus: false });
    }
  };

Answer 1

Задавать isUserLoggedIn читая состояние, не обращайтесь напрямую AuthenticationService.