本文介绍了使用反应路由器重定向到主页的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我几个小时前问了一个 问题,一切正常.但问题是当我在第三步时单击徽标时,我被重定向到第二步而不是主页.

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: {}});
   }
}

这篇关于使用反应路由器重定向到主页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-17 13:59
查看更多