问题描述
我几个小时前问了一个 问题,一切正常.但问题是当我在第三步时单击徽标时,我被重定向到第二步而不是主页.
I few hours ago I asked a question, and everything worked fine.But the problem is when I click on the logo when I'm on a for example third step, I'm redirected to the second step in place of the homepage.
知道如何避免这种情况,当我点击徽标时,无论我在哪个步骤,它都会将我重定向到主页.
Any idea how to avoid that and when I click on the logo that it redirects me to the home page no matter on which step I am.
推荐答案
基本上 routerWillLeave
钩子现在总是会在你做一些会导致路由改变的事情时启动.由于在步骤之间导航时您只需要这种特殊行为,您可以添加某种 flag
变量来确定您是否想要正常"行为.
Basically the routerWillLeave
hook will always kick in now whenever you do something that will cause a Route change. Since you only want this special behavior when navigating between your Steps, you could add some sort of a flag
variable to determine if you want the "normal" behavior or not.
试试这个:
routerWillLeave = (nextLocation) => {
if (this.state.step > 1 && this.flag) {
this.setState({step: this.state.step-1});
this.flag = false; // <-- reset the flag.
return false;
}
this.flag = false; // <-- reset the flag.
}
我添加了 &&this.flag
到您的代码,这意味着 step
需要大于 1 和 flag
需要是 true
以便 step
减少.
I added the && this.flag
to your code, meaning that the step
needs to be greater than 1 and the flag
needs to be true
in order for step
to decrease.
要实际设置标志,请在单击更改 step
的按钮时将其设置为 true.
To actually set the flag, set it to true whenever the buttons that change step
are clicked.
onButtonClick(name, event) {
event.preventDefault();
this.flag = true; // <-- We clicked on button; set flag to true
switch (name) {
case "stepFourConfirmation":
this.setState({step: 1});
break;
case "stepTwoNext":
this.setState({step: 3, errors: {}});
break;
case "stepThreeFinish":
this.setState({step: 4});
break;
default:
this.setState({step: 2, errors: {}});
}
}
这篇关于使用反应路由器重定向到主页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!