0
216
ViewsCuando se agrega el encabezado, la ruta protegida no se procesa
Estoy haciendo una aplicación simple que tiene una ruta protegida.
El código va como:
function App() { return ( <> <Router> <Header /> <Routes> <Route path="/" element={<Home />} /> <Route path="/protected" element={ <PrivateRoute> <ProtectedExample /> </PrivateRoute> } /> <Route path="/sign-in" element={<Login />} /> </Routes> </Router> </> ); }La ruta privada es:
import { Navigate } from "react-router-dom"; import { useAuthStatus } from "../hooks/useAuthStatus"; import Spinner from "./Spinner"; const PrivateRoute = ({ children }) => { const { loggedIn, checkingStatus } = useAuthStatus(); if (checkingStatus) { return <Spinner />; } return loggedIn ? children : <Navigate to="/sign-in" />; }; export default PrivateRoute;Ruta Protegida
import React from "react"; const ProtectedExample = () => { return <div>ProtectedExample</div>; }; export default ProtectedExample;Encabezado.js
import React from "react"; import { Container, Nav, Navbar } from "react-bootstrap"; import { Link } from "react-router-dom"; const Header = () => { return ( <Navbar bg="light" variant="light" fixed="top"> <Container> <Navbar.Brand> <Link to="/">Vivans</Link> </Navbar.Brand> <Nav className="me-auto"> <Link to="/sign-in" className="me-4"> Login </Link> <Link to="/protected">ProtectedRoute</Link> </Nav> </Container> </Navbar> ); }; export default Header;Cuando elimino el componente de encabezado en App.js
La salida es: 
Pero cuando agrego un componente de encabezado en App.js
La salida es: 
No devuelve ProtectedExample como se esperaba.
¿Por qué?
1 answers
Answer question0
En realidad, podría estar renderizándolo. Tal vez sea invisible para nosotros debido al estilo CSS.
<Navbar bg="light" variant="light" fixed="top"> En la línea anterior, le ha dado a la barra de navegación que se fixed en la parte superior. Entonces el ProtectedExample estaría detrás de la NavBar de navegación.
Consulte: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Intenta cambiar tu componente de esta manera,
const ProtectedExample = () => { return <div style="margin-top: 3em">ProtectedExample</div>; };Esto podría traer el contenido hacia abajo para hacerlo visible.