Estoy usando React Router v6 en mi aplicación. El usuario debe ser redirigido a la página de inicio de sesión cuando no haya iniciado sesión y se debe mostrar un mensaje de error. Hasta ahora, la parte de redirección funciona bien y lleva al usuario a la página de inicio de sesión. Necesito mostrar el mensaje de autenticación requerida en la página de inicio de sesión.
El código es el siguiente:
const PrivateRoute = ({ Component }) => { const auth = false; //your logic return auth ? ( <Component /> ) : ( <Navigate to="/login" replace={true} state={{ alert: "Authentication is required" }} /> ); };El componente de inicio de sesión es el siguiente:
function Login(props) { debugger return <h1>Login page</h1>; } ¿Cómo accedo al mensaje de error en el componente de inicio de sesión? Algo como this.props.alert ?
Puede acceder al mensaje de alerta con la ayuda de useLocation de React Router Dom. Como esto:
import { useLocation } from "react-router-dom" function Login(props) { const location = useLocation(); return <h1>{location.state.alert}</h1>; }puedes acceder como:
import { useLocation } from "react-router-dom";Después:
const { state } = useLocation(); return <div>{state.alert}</div>;