Question

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

任何想法如何避免这种情况，当我点击徽标时，无论我在哪一步，它都会将我重定向到主页。

Answer 1

基本上，每当你做一些会导致路线改变的事情时，routerWillLeave钩子总会开始。由于在步骤之间导航时只需要这种特殊行为，因此可以添加某种flag变量来确定是否需要“正常”行为。

试试这个：

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减少。

要实际设置标记，只要点击更改step的按钮，就将其设置为true。

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

Answer 2

也许您必须验证nextLocation是否为'/'并返回true：

componentDidMount = () => {
  this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave);
  //or this.context.router, depending on your app
}

routerWillLeave = (nextLocation) => {
  if(nextLocation === '/') {
    return true;
  }

  if (this.state.step > 1) {
    this.setState({step: this.state.step-1});
    return false;
  }
}

使用react路由器重定向到主页

2 个答案: