Redirect to another page in reactJS onClick - reactjs

Question

I'm working on a reactJS web App , im stuck in this problem . I want to use or any other method to redirect to another page after testing a value from the server.
I tried this :
<Link to='/Upload'>
<Button
variant="contained"
color="primary"
onClick={async () => {
await verificationp(phone, code).then(async (result) => {
if ((await result) === true) {
//I want to redirect to another page
} else {
//I want to display an alert
}
});
}}
>
Submit
</Button>
</Link>

Answer 1

You don't need to use the Link component in this example. Try using the history prop (props.history.push('/')) See the below examples, the last one should apply to you:
In your App.js router:
<Switch>
<Route path="/auth" component={Auth} />
<Route path="/errorpage" component={ErrorPage} />
<Route path="/" exact component={HomeScreen} />
<Redirect to='/' />
</Switch>
On the page where you want to redirect:
import React, { useState } from 'react'
const Auth = props => {
const [form, setForm] = useState({
data: {
email: '',
password: ''
}
})
const authHandler = async (event) => {
event.preventDefault()
try {
// await dispatch(action) // dispatch to redux or send a fetch
props.history.push('/') // redirects if no errors
} catch (err) {
props.history.push('/errorpage') // redirects if an error
}
}
const inputChangedHandler = e => {
setForm({
...form,
data: {
...form.data,
[e.target.id]: e.target.value
}
})
}
return (
<div>
<form onSubmit={authHandler}>
<input id='email' type='email' value={form.data.email} onChange={inputChangedHandler} />
<input id='password' type='password' value={form.data.password} onChange={inputChangedHandler} />
<button type='submit'>Login</button>
</form>
</div>
)
}
export default Auth
In your case try the below if the page is on the route stack the history prop will be available or you will have to use withRouter or useHistory hook to get access to the history prop.
const clickHandler = () => {
try {
// await dispatch(action)
props.history.push('/') // redirects
} catch (err) {
props.history.push('/errorpage') // redirects
}
}
return (<button type='button' onClick={clickHandler}>Click Me</button)

Answer 2

Here is the Redirect doc
I think best thing you can do is create a separate function for onClick and change a state to redirect, so this way you can prevent some action by user while request is in progress
const [redirectTo, setRedirectTo] = useState('');
const chekcfromServer = async () => {
await verificationp(phone, code).then(async (result) => {
if ((await result) === true) {
setRedirectTo('/somewhereinyour/application')
} else {
// I want to display an alert
}
});
};
and when in render
return (
<>
redirectTo && <Redirect to={{pathname: redirectTo }} />
...rest of your code
</>
)

Answer 3

You can use "redirect" from "react-router-dom"
Example:
import { Redirect } from "react-router-dom";
<Link to='/Upload'>
<Button
variant="contained"
color="primary"
onClick={async () => {
await verificationp(phone, code).then(async (result) => {
if ((await result) === true) {
//I want to redirect to another page
return <Redirect to="your_url" />
} else {
//I want to display an alert
}
});
}}
>
Submit
</Button>
</Link>

Answer 4

I tend to use the state system (Redux) to resolve this issue.
So my problem was I wanted to fire an event.preventDefault() to stop a link being clicked, but then I wanted to do an API call after it (to check login status, as it was a complex IoT device) and click the link if the check was fine, but not click the link if it wasn't. However, the event.PreventDefault() stopped me doing this, because it cancels any events (I'm sure there are nicer ways to achieve this! but time targets and all that).
I solved this by:
Having my usual async function with the event.preventDefault() inside it.
Within the first call I set some state in Redux, just a basic boolean.
If the API check was successful then I call the same click function again (using .click()) and bypass the event.preventDefault() thanks to Redux (then reset the state afterwards) which forces the re-direct. If the check failed then I display an error message and don't display again (while obviously updating Redux).
The State Management system inside React is very powerful. You can do some hacky things! but sometimes the other "correct" solutions don't work for you; for example the history props functionality, which you can get round that other ways via State Management.