Estoy tratando de navegar a la página de administración si LoggedIn y admin son verdaderos al enviar accesorios a /admin pero esto no funciona. ¿Podrías ayudarme por favor?
export default function Auth() { function login(e) { e.preventDefault(); const data = { email, password }; axios .post("http://localhost:3001/api/Login", data, { withCredentials: true }) .then((response) => { if(!!response.data.loggedIn && !!response.data.admin){ return( <Navigate to="/admin" loggedIn={"response.data.loggedIn"} replace/> )} else if(!!response.data.loggedIn && ! !!response.data.admin){ window.location.href = "https://www.dummyweb.com/webmail";} else{return(alert("Username or Password is not valid!"))} }); } return ( <div> <LogginForm/> </div> ) }Para renderizar contenido condicionalmente o redirigir, debe usar lo siguiente:
react-router-dom Dado que está tratando de usar el useNavigate , asumiré que está usando react-router-dom v6 y comenzará allí.
El componente Redirect se eliminó en react-router-dom v6. Use el componente Navigate y también especifique el accesorio de replace para hacer una redirección en lugar de una navegación normal.
export default function Admin(props) { return props.isLoggedIn ? ( <div> <Row className={stylesadmin.root}> <Uploader/> <ToastContainer/> </Row> </div> ) : ( <Navigate to="/Auth" replace /> ); } Utilice el componente Redirect para redirigir a "/Auth".
export default function Admin(props) { return props.isLoggedIn ? ( <div> <Row className={stylesadmin.root}> <Uploader/> <ToastContainer/> </Row> </div> ) : ( <Redirect to="/Auth" /> ); }Uso de navegación/redireccionamiento imperativo.
Importe el useNavigate (v6) / useHistory (v5) y emita una redirección imperativa.
export default function Auth() { const navigate = useNavigate(); // v6 // const history = useHistory(); // v5 function login(e) { e.preventDefault(); const data = { email, password }; axios .post("http://localhost:3001/api/Login", data, { withCredentials: true }) .then((response) => { if (!!response.data.loggedIn && !!response.data.admin) { navigate( "/admin", { replace: true, state: { loggedIn: response.data.loggedIn }, } ); // history.replace( // "/admin", // { // loggedIn: response.data.loggedIn, // } // ); } else if (!!response.data.loggedIn && ! !!response.data.admin) { window.location.href = "https://www.dummyweb.com/webmail"; } else { alert("Username or Password is not valid!"); } }); } return ( <div> <LogginForm/> </div> ); }Puede usar el componente de redirección del enrutador de reacción
return <>{props.isLoggedIn ? (<div> <Row className={stylesadmin.root}> <Uploader/> <ToastContainer/> </Row> </div>) : <Redirect to='/Auth'/> }</> }puede usar el componente Redirect o usar useHistory de react-router-dom