繁体   English   中英

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

[英]this.props.history.push() skips middle page

我查看了教程并从事了一个与路由器相关的小项目。 我的项目现在有 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";

没有主页时,从登录页面到验证的导航非常好; 但是当我添加第三页时 “主页”页面,当我点击登录页面上的提交按钮时,它直接将我带到“主页”页面,跳过“验证”页面。

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

您必须将按钮代码更改为如下所示:

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

或类似的东西:

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

因为它 onClick 获得了一个回调函数,而您正在调用它中的一个函数

push是一个同步操作,因此它确实加载了/verify路由,但它更改为/home路由的速度太快了。 如果您想正确加载/verify ,您可以从路由内重定向到 home,而不是在onSubmit方法中。

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

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM