Question 237890 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React JS: NavBar doesn't get Updated with Links after Login / LogOut using routerv6

Iam trying to conditionally render the navigation links in the NavBar1 component based on the user’s login status. The issue iam facing is that the menu doesn’t update immediately after logging in or logging out; I need to refresh the browser to see the changes. Please help

import React,{useState,useEffect} from "react";
import '../style/NavBar1.css';

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import {Link} from 'react-router-dom';
import AuthenticationService from "../service/AuthenticationService";

const NavBar1 = () => {
    
    const [isLoggedIn,setisLoggedIn] =useState();

    useEffect(() => { 
           setisLoggedIn(AuthenticationService.isUserLoggedIn()); 
    }, [isLoggedIn]);

    return(
        <nav className="navbar">
            <ul className="nav-list">
            {isLoggedIn ? ( <>
                <li className="nav-item">
                <Link to="/" className="nav-link">
                        <span>
                            <FontAwesomeIcon icon="home"></FontAwesomeIcon>  
                        </span> &nbsp;
                        Home</Link>
                </li>
                <li className="nav-item">
               <Link to="/product" className="nav-link">
                    <span>
                            <FontAwesomeIcon icon="bomb"></FontAwesomeIcon>  
                    </span> &nbsp; 
                        Products</Link>
                </li>
                <li className="nav-item">
                <Link to="/dealers" className="nav-link">
                    <span>
                            <FontAwesomeIcon icon="people-group"></FontAwesomeIcon>  
                    </span> &nbsp; 
                       Dealers Info</Link>
                </li> 
                <li className="nav-item">
                <Link to="/logout" className="nav-link" onClick={AuthenticationService.logout}>
                    <span>
                            <FontAwesomeIcon icon="sign-out"></FontAwesomeIcon>  
                    </span> &nbsp; 
                       Logout</Link>
                </li>
                </>
        ) : (
          <>
             <li className="nav-item">
                <Link to="/register" className="nav-link">
                        <span>
                            <FontAwesomeIcon icon="camera-retro"></FontAwesomeIcon>  
                        </span> &nbsp; 
                        Register</Link>
                </li>

                <li className="nav-item">
                <Link to="/login" className="nav-link">
                    <span>
                            <FontAwesomeIcon icon="sign-in"></FontAwesomeIcon>  
                    </span> &nbsp; 
                    Login</Link>
                </li>

                <li className="nav-item">
                <Link to="/aboutus" className="nav-link">
                    <span>
                            <FontAwesomeIcon icon="coffee"></FontAwesomeIcon>  
                    </span> &nbsp; 
                       About Us</Link>
                </li>
          </>
        )}
                </ul>
        </nav>
    );
}
export default NavBar1;

AuthenticationService.js

static isUserLoggedIn() {
    let user = sessionStorage.getItem(USER_NAME_SESSION_ATTRIBUTE_NAME)
    if (user === null) return false;
    
    return true;
}

I want menu bar links changed based on user Login

Tags:

2

Answers


  1. 0

    Set Initial state for isLoggedIn to false

    Login or Signup to reply.
  2. 0

    Maybe this can help you,
    modify the useEffect like this:

    useEffect(() => { 
    setisLoggedIn(AuthenticationService.isUserLoggedIn()); 
}, []);

    By removing the isLoggedIn dependency, you ensure that the effect runs only once when the component mounts, and not on subsequent updates to isLoggedIn. This will correctly set the initial value of isLoggedIn based on the user’s login status.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search