this.props.history.push() skips middle page

Question

I checked out the tutorials and working on a small project related to routers. I have 3 pages in my project right now.namely Login, Verify and Home. on all the pages i have a submit button like follows.

<button type="submit"  onClick= {this.onSubmit()}>next page name</button>

my onSubmit methods on login and verify page are as follows respectively:

this.props.history.push('/verify');
this.props.history.push('/home');

these are my imports:

import { 
BrowserRouter as Router,
Switch,
Route,
NavLink,
useRouteMatch} from "react-router-dom";

When there was no Home page , navigation from login page to verify was very good; but when I added third page ; the "Home" page, when I click the submit Button on Login page, it directly takes me to the " Home " Page skipping the " Verify " page.

Please guide me where I'm going wrong! Thanks!

Answer 1

You have to change the button code to something like this :

<button type="submit" onClick= {()=>this.onSubmit()}>next page name</button>

or something like this :

<button type="submit" onClick= {this.onSubmit}>next page name</button>

because it the onClick gets a callback function and you are calling a function in it instead

Answer 2

push is a synchronous action so it does load the /verify route, but it changes too quickly to the /home route. If you want to load the /verify correctly you can redirect to home from within the route, not in the onSubmit method.

Also, as Mahdi mentions, you shouldn't call the function directly from the onClick . You need to pass a callback:

<button type="submit"  onClick= {this.onSubmit}>next page name</button>

For more information on this please to refer to this link .