0

Tengo en mi página Home un menú donde están el menú de navegación, entonces cuando está en Home verifica si el Id del usuario está nulo o no. Si no está nulo (si la sesión ya se inició entonces "show" se pone en verdadero y tiene que mostrarse el menú de navegación, de lo contrario, pues falso y no lo muestra. A continuación el código:

import React, { useEffect, useState } from 'react';
import 'bootstrap/dist/js/bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import './App.css';
import Login from './Login';
import Logout from "./Logout";
import { Routes, Route, useNavigate } from "react-router-dom";


const Home = () =>{

 const navigate=useNavigate();
 const [show, setShow]=useState(Boolean);

  useEffect(()=>{
                    let idusario=sessionStorage.getItem("Iduser");
                     
               
                    if(idusario==="" || idusario===null || idusario===undefined){ 
                         setShow(false);
                         navigate("/login");
                    }
                    else{
                         setShow(true);
                    }
  }, []);


  return (          
         <div className="container">   
              <nav className="navbar navbar-expand navbar-light bg-light">
                  <div className="nav navbar-nav">
                  <a className="navbar-brand" href="/Home">
                     <img src={Logo}></img>
                  </a>                 
                  <div className="dropdown">                   
                  <a className="btn btn-secondary dropdown-toggle" type="button" id="dropdownCatalogos" data-bs-toggle="dropdown" aria-expanded="false">
                        Opcion
                  </a>  
                  <ul className="dropdown-menu" aria-labelledby="dropdownCatalogos">
                       <li><a className="dropdown-item" href="/Opcion">Opcion</a></li>
                       <li><a className="dropdown-item" href="/Opcion">Opcion</a></li>
                       <li><a className="dropdown-item" href="/Opcion">Opcion</a></li> 
                   </ul>
                  </div>
                
                  <div className="dropdown">
                  <a className="btn btn-secondary dropdown-toggle"  type="button" id="dropdownRecepción" data-bs-toggle="dropdown" aria-expanded="false">
                        Opcion
                  </a>
                  <ul className="dropdown-menu" aria-labelledby="dropdownRecepción">
                       <li><a className="dropdown-item" href="/x">Opcion</a></li>                                              
                   </ul>
                  </div>

                  <div className="dropdown">
                  <a className="btn btn-secondary dropdown-toggle"  type="button" id="dropdownSalaespera" data-bs-toggle="dropdown" aria-expanded="false">
                       Opcion
                  </a>
                  <ul className="dropdown-menu" aria-labelledby="dropdownSalaespera">
                       <li><a className="dropdown-item" href="/x">Opcion</a></li>                                              
                   </ul>
                  </div>

                  <div className="dropdown">
                  <a className="btn btn-secondary dropdown-toggle"  type="button" id="dropdownSalaespera" data-bs-toggle="dropdown" aria-expanded="false">
                       Opcion
                  </a>
                  <ul className="dropdown-menu" aria-labelledby="dropdownSalaespera">
                       <li><a className="dropdown-item" href="/x">Opcion</a></li>                                              
                   </ul>
                  </div>

                  <div className="dropdown">
                  <a className="btn btn-secondary dropdown-toggle"  type="button" id="dropdownHistorialMedico" data-bs-toggle="dropdown" aria-expanded="false">
                          Opcion
                  </a>
                  <ul className="dropdown-menu" aria-labelledby="dropdownHistorialMedico">
                       <li><a className="dropdown-item" href="/x">Opcion</a></li>                                              
                   </ul>
                  </div>
                  &nbsp; &nbsp; &nbsp;
                  </div>

                  <ul className="navbar-nav">
                           <li className="nav-item">
                             <a className="text-black mt-5 mb-5">Opcion(a):<b>{sessionStorage.getItem("x")}</b></a>
                           </li>
                      <ul className="navbar-nav">
                          <li className="nav-item">
                            <a className="nav-link d-block" href="/logout">
                                <b>Opcion</b>
                            </a>
                          </li>
                       </ul>
                    </ul>
              </nav> 
              <br></br> 
                          
              <Routes>  
                  <Route path="/opcion..." element={<opcion />} />
                  <Route path="/opcion..." element={<opcion />} />
                  <Route path="/opcion..." element={<opcion />} />
                  <Route path="/opcion..." element={<opcion />} /> 
            </Routes>  
          </div> 
       );
}
export default Home;

El problema es que no se, donde poner el "show" para que oculte todo el menú y sus opciones para esto, intente:

  • Poner un div, encerrando todo el menú donde en el ClasName={show} pues hacer dicha acción (y hacer visible o no desde el "container" hasta la ultima opción visible o no, pero no funcionó.

El menú es un dropdown de bootstrap 5. No soy un experto en FE y por lo tanto no encuentro una respuesta sencilla. ¿Alguien sabe cómo hacerlo?. Saludos y gracias.

1

1 respuesta 1

1

puedes ocultar ciertos elementos del JSX en React usando operadores de asignación como el operador ternario (a?b:c) o la asignación con operador lógico, en este caso el &&

Primero, esto no es necesario, pero para visualizar mejor lo que debemos hacer es indicar la barra de navegación como un solo componente

const NavigationBar = () => (
    <nav className="navbar navbar-expand navbar-light bg-light">
        <div className="nav navbar-nav">
        <a className="navbar-brand" href="/Home">
            <img src={Logo}></img>
        </a>                 
        <div className="dropdown">                   
        <a className="btn btn-secondary dropdown-toggle" type="button" id="dropdownCatalogos" data-bs-toggle="dropdown" aria-expanded="false">
            Opcion
        </a>  
        <ul className="dropdown-menu" aria-labelledby="dropdownCatalogos">
            <li><a className="dropdown-item" href="/Opcion">Opcion</a></li>
            <li><a className="dropdown-item" href="/Opcion">Opcion</a></li>
            <li><a className="dropdown-item" href="/Opcion">Opcion</a></li> 
        </ul>
        </div>
    
        <div className="dropdown">
        <a className="btn btn-secondary dropdown-toggle"  type="button" id="dropdownRecepción" data-bs-toggle="dropdown" aria-expanded="false">
            Opcion
        </a>
        <ul className="dropdown-menu" aria-labelledby="dropdownRecepción">
            <li><a className="dropdown-item" href="/x">Opcion</a></li>                                              
        </ul>
        </div>

        <div className="dropdown">
        <a className="btn btn-secondary dropdown-toggle"  type="button" id="dropdownSalaespera" data-bs-toggle="dropdown" aria-expanded="false">
            Opcion
        </a>
        <ul className="dropdown-menu" aria-labelledby="dropdownSalaespera">
            <li><a className="dropdown-item" href="/x">Opcion</a></li>                                              
        </ul>
        </div>

        <div className="dropdown">
        <a className="btn btn-secondary dropdown-toggle"  type="button" id="dropdownSalaespera" data-bs-toggle="dropdown" aria-expanded="false">
            Opcion
        </a>
        <ul className="dropdown-menu" aria-labelledby="dropdownSalaespera">
            <li><a className="dropdown-item" href="/x">Opcion</a></li>                                              
        </ul>
        </div>

        <div className="dropdown">
        <a className="btn btn-secondary dropdown-toggle"  type="button" id="dropdownHistorialMedico" data-bs-toggle="dropdown" aria-expanded="false">
                Opcion
        </a>
        <ul className="dropdown-menu" aria-labelledby="dropdownHistorialMedico">
            <li><a className="dropdown-item" href="/x">Opcion</a></li>                                              
        </ul>
        </div>
        &nbsp; &nbsp; &nbsp;
        </div>

        <ul className="navbar-nav">
                <li className="nav-item">
                    <a className="text-black mt-5 mb-5">Opcion(a):<b>{sessionStorage.getItem("x")}</b></a>
                </li>
            <ul className="navbar-nav">
                <li className="nav-item">
                <a className="nav-link d-block" href="/logout">
                    <b>Opcion</b>
                </a>
                </li>
            </ul>
        </ul>
    </nav>
)

Todo el renderizado de la barra de navegación se encuentra en ese componente.

Ahora para ocultarlo y mostrarlo a voluntad podemos usar el la asignación con && de esta manera.

return (          
    <div className="container">   
        {show && <NavigationBar/>} 
        <br></br>           
        <Routes>  
            <Route path="/opcion..." element={<opcion />} />
            <Route path="/opcion..." element={<opcion />} />
            <Route path="/opcion..." element={<opcion />} />
            <Route path="/opcion..." element={<opcion />} /> 
    </Routes>  
    </div> 
);

En el ejemplo de arriba, si show es verdadero se muestra lo que esta despues del &&, que en este caso es un componente con la barra de navegación.

O como dije, puedes ocupar el operador ternario.

return (          
    <div className="container">   
        {show ? <NavigationBar/>: <></> /* Puedes reemplazar <></> con cualquier otro componente*/ } 
        <br></br>           
        <Routes>  
            <Route path="/opcion..." element={<opcion />} />
            <Route path="/opcion..." element={<opcion />} />
            <Route path="/opcion..." element={<opcion />} />
            <Route path="/opcion..." element={<opcion />} /> 
    </Routes>  
    </div> 
);

Este último te recomiendo ocuparlo si muestras una u otra cosa dependiendo del resultado. Luego si tienes situaciones mas complejas puedes usar componentes que retornen algo dependiendo de lo que quieras mostrar pero este caso más básico. Espero que sirva

3
  • Hola, Juanpurpp y gracias por tu ayuda y tiempo. Funciona, solo que por alguna razón cuando hago login se va a /Home , pero, no muestra nada; tengo que darle refresh al navegador para que se muestre. Y cuando me salgo del sistema manda a login, pero, sigue visible el menú de navegación.
    – Saulo
    Commented el 10 ago. 2023 a las 17:50
  • Hola @Saulo , eso ocurre pq <a> pre-carga el componente, por lo que cuando logueas y vuelves a home, el componente correspondiente a home ya se cargó inicialmente. Lo que te recomiendo es que uses el useContext(), que es un tema mas o menos complejo pero es bastante útil para esos casos en que las variables globales se usan en muchas hooks distribuidos en tu proyecto. O sino en el useEffect, en el array de seguimiento de variables pones el sessionStorage.getItem("Iduser"), para que el useEffect se ejecute con el cambio de esta variable. No estoy seguro de que funcione
    – Juanpurpp
    Commented el 10 ago. 2023 a las 19:53
  • Bueno, la idea al inicio fue muy buena, pero, definitivamente no tengo -aún- ese conocimiento para mover esto con facilidad. Solo está ese "pequeño gran detalle" con estar dando refresh al navegador. Ya use código para refrescar, pero, no funciona bien.
    – Saulo
    Commented el 10 ago. 2023 a las 21:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.