Tengo problemas para escribir código para mostrar una página de inicio de sesión sin barra de navegación ni barra lateral. He encontrado algunas páginas que hacen preguntas similares, pero ninguna parece pertenecer a mi situación actual.
Cómo ocultar la barra de navegación en la página de inicio de sesión en el enrutador de reacción El ejemplo dado es excelente, pero creo que la forma de realizar esa misma tarea ha cambiado con react-router-dom v6, lo que me lleva a leer sobre este cambio en https://dev.to/ iamandrewluca/private-route-in-react-router-v6-lg5
Parece que no entiendo cierto aspecto sobre el enrutamiento con React Router. En el siguiente código tengo dos Rutas. Una de las rutas (Inicio de sesión) que me gustaría tener renderizada sin el componente NavBar y SideBar.
const App = () => { return ( <> <Routes> <Route path="/login" element={<LoginPage />} /> </Routes> <NavBar /> <SideBar /> <main className={styles["main--container"]}> <div className={styles["main--content"]}> <Routes> <Route path="/" element={<Dashboard />} /> </Routes> </div> </main> </> ); };Una alternativa, que también probé, sería mover las etiquetas NavBar y SideBar al componente Dashboard, pero luego tendría que hacer lo mismo para copiar y pegar para cualquier componente nuevo. Este método se sintió incorrecto e ineficiente, pero si esta es la forma correcta de hacerlo, haré lo necesario.
Editar: creo que es importante incluir lo que hace actualmente es cargar la página de inicio de sesión con la barra de navegación y la barra lateral incluidas. Navegar al componente del tablero tiene la barra de navegación y la barra lateral, pero esto está previsto. Lo que me gustaría es que la página de inicio de sesión no tenga la barra de navegación y la barra lateral.
Si entiendo su pregunta, desea mostrar la navegación y la barra lateral en la ruta sin inicio de sesión. Para esto, puede crear un componente de diseño que los represente y una salida para las rutas anidadas.
Ejemplo:
import { Outlet } from 'react-router-dom'; const AppLayout = () => ( <> <NavBar /> <SideBar /> <main className={styles["main--container"]}> <div className={styles["main--content"]}> <Outlet /> // <-- nested routes rendered here </div> </main> </> ); const App = () => { return ( <> <Routes> <Route path="/login" element={<LoginPage />} /> <Route element={<AppLayout />} > <Route path="/" element={<Dashboard />} /> // <-- nested routes </Route> </Routes> </> ); };La forma más fácil de ocultar la barra de navegación sería ir al componente de la página de inicio de sesión y llamar a useLocation(). Entonces haría algo como esto después de declarar la ubicación de uso. ¿Y asignarlo a una ubicación variable { location.pathname === "/login"? nulo : (
Renderice todo el componente de la barra de navegación);
No estoy de acuerdo si puedes leer mientras escribo desde mi teléfono