this.props.history.push() 跳過中間頁

Question

我查看了教程並從事了一個與路由器相關的小項目。 我的項目現在有 3 個頁面。即登錄、驗證和主頁。 在所有頁面上，我都有一個如下所示的提交按鈕。

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

我在登錄和驗證頁面上的 onSubmit 方法分別如下：

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

這些是我的進口：

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

沒有主頁時，從登錄頁面到驗證的導航非常好； 但是當我添加第三頁時； “主頁”頁面，當我點擊登錄頁面上的提交按鈕時，它直接將我帶到“主頁”頁面，跳過“驗證”頁面。

請指導我哪里出錯了！ 謝謝！

Answer 1

您必須將按鈕代碼更改為如下所示：

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

或類似的東西：

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

因為它 onClick 獲得了一個回調函數，而您正在調用它中的一個函數

Answer 2

push是一個同步操作，因此它確實加載了/verify路由，但它更改為/home路由的速度太快了。 如果您想正確加載/verify ，您可以從路由內重定向到 home，而不是在onSubmit方法中。

此外，正如 Mahdi 提到的，您不應該直接從onClick調用該函數。 你需要傳遞一個回調：

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

有關這方面的更多信息，請參閱此鏈接。