I'm trying to navigate to admin page if LoggedIn and admin is true while sending props to /admin but this isn't working. Can you help please?
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>
)
}
To conditionally render content or redirect then you should use the following:
react-router-domSince you are trying to use the useNavigate hook I'll assume you are using react-router-dom v6 and will start there.
The Redirect component was removed in react-router-dom v6. Use the Navigate component and also specify the replace prop to do a redirect instead of a normal navigation.
export default function Admin(props) {
return props.isLoggedIn ? (
<div>
<Row className={stylesadmin.root}>
<Uploader/>
<ToastContainer/>
</Row>
</div>
) : (
<Navigate to="/Auth" replace />
);
}
Use the Redirect component to redirect to "/Auth".
export default function Admin(props) {
return props.isLoggedIn ? (
<div>
<Row className={stylesadmin.root}>
<Uploader/>
<ToastContainer/>
</Row>
</div>
) : (
<Redirect to="/Auth" />
);
}
Using imperative navigation/redirect.
Import the useNavigate (v6) / useHistory (v5) hook and issue imperative redirect.
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>
);
}
You can use react-router Redirect component
return <>{props.isLoggedIn ? (<div>
<Row className={stylesadmin.root}>
<Uploader/>
<ToastContainer/>
</Row>
</div>) : <Redirect to='/Auth'/> }</>
}
you can use either Redirect component or use useHistory hook from react-router-dom