React组件在浏览器后退/前进按钮上中断

Question

I have two forms, one is called profile, the other is settings. I'm using introjs to have a guided tour through these two forms. If I only move forward through the tour using the introjs 'Next Step' button there are no issues (first image). But, if I use the browser back or forward button, my forms look like the second image.

Code on profile page that utilize introjs:

runTour() {
if (this.state.showTour === true) {
  const tourObj = {
    userId: Meteor.userId(),
    page: 'profile',
  };
  introJs.introJs().setOption('doneLabel', 'Next step').start().oncomplete(() 
=> {
    changeIntroTour.call(tourObj);
    browserHistory.push('/user/settings');
  })
    .onexit(() => {
      changeIntroTour.call(tourObj);
    });
 }
}

componentWillReceiveProps(nextProps) {
  this.existingSettings(nextProps);
  if (nextProps.intro.length > 0) {
    this.setState({
      showTour: nextProps.intro[0].profileTour,
    }, () => {
      this.runTour();
    });
  }
}

Answer 1

The issue was I was not calling introJs.exit() on componentWillUnmount. This was keeping my instance of introJs running from one component to the next which caused the bug.