Menu
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>
)
}
457
To switch between pages in React, we can use the React Router package. First, we create the Foo and Bar page components. Next, we add the Route s to map the URLs to the components to render. Then we add the NavLink s to add links that lets us set the class name of the active link.
To use a condition inside map() in React: Call the map() method on an array. Use a ternary operator to check if the condition is truthy. The operator returns the value to the left of the colon if the condition is truthy, otherwise the value to the right is returned.
You can use the ternary operator to configure dynamic classes in React. It is a short and simple syntax. First, you must write a JavaScript expression that evaluates true or false , followed by a question mark.
Introduction to React Ternary Operator. The ternary operator in the react js works in the same way how it works in the Javascript. With the help of the ternary operator, we can display the contents on the basis of one condition where everything depends on the condition true and false we can put the contents on the conditional basis.
With the help of the ternary operator, we can display the contents on the basis of one condition where everything depends on the condition true and false we can put the contents on the conditional basis.
This part is the html which is responsible to contain all the react components and to display them . Below we have displayed two screens of example out of it one is the screen before clicking the button access and another is the button after clicking the access, here on clicking the button and message both are changing.
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
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
