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>

有关这方面的更多信息，请参阅此链接。