Soy nuevo en reactjs y no pude resolver este problema. Cuando hago clic en el botón de inicio de sesión, va a la página de inicio, pero la barra de navegación y la barra lateral permanecen en la página de inicio de sesión. ¿Como puedo solucionar este problema? ¿No puedo manejar este problema sin colocar la barra de navegación y la barra lateral dentro de otros componentes?
Finalmente lo resolví. Explicaré cada parte del código.
En primer lugar, importe useState y useEffect desde react
import { useState, useEffect } from 'react' Ahora, tenemos que saber la ruta actual de la página web. Para eso, usamos useState para establecer la ruta actual.
En la función App() , inicializamos currPath y establecemos su valor inicial en la ruta actual.
const [currPath, setCurrPath] = useState(window.location.pathname) Según el comportamiento de useEffect() , se llama cada vez que se modifican los elementos de la página. Lo usamos para obtener la ruta actual cada vez que vamos a la página con una ruta diferente, es decir, cuando se modifican los elementos de la página.
useEffect(() => { setCurrPath(window.location.pathname) }, []) Ahora, cada vez que vamos a una página diferente, currPath se actualiza. Como solo queremos mostrar la barra de navegación y la barra lateral siempre que la path no sea / , es decir, no sea la ruta de inicio de sesión, lo escribimos como:
{currPath !== '/' && <><SidebarNav /><Navbar /></>} El fragmento anterior se encuentra justo debajo de la etiqueta de apertura <BrowserRouter> .
Nota: varios elementos JSX deben estar envueltos en una etiqueta envolvente y, por lo tanto, tanto <SidebarNav /> como <Navbar /> están envueltos dentro de <> y </> .