this.props.history.push() 跳过中间页

Question

我查看了教程并在做一个与路由器相关的小项目。我的项目中有 3 个页面 now.namely 登录、验证和主页。在所有页面上，我都有一个提交按钮，如下所示。

<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";

当没有首页时，从登录页面导航到验证非常好；但是当我添加第三页时； "Home"页面，当我点击登录页面上的提交按钮时，它直接带我 跳转到“Home”页面，跳过“Verify”页面。

请指导我哪里出错了！谢谢！

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 你可以从路由中重定向到主页，而不是在 onSubmit 方法中。

此外，正如 Mahdi 提到的，您不应该直接从 onClick 调用该函数。您需要传递一个回调：

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

有关此的更多信息，请参阅此 link。

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