触发事件操作时返回按钮被点击阵营

Question

我有以下组成部分

class NewCampaign extends Component { 
    constructor(props) { 
    super(props) 
    this.nextStep = this.nextStep.bind(this) 
    this.previousStep = this.previousStep.bind(this) 

    this.state = { 
     page: 1, 
    } 
    } 

    nextStep() { 
     var newStep = this.state.step +1; 
     this.setState({ page: newStep }) 
    } 

    previousStep() { 
     var newStep = this.state.step -1; 
     this.setState({ page: newStep }) 
    } 


    render() { 
    return (
     <div className="campaign"> 
      {page === 1 && <Step1Page nextStep={this.nextStep}/>} 
      {page === 2 && <Step2Page previousStep={this.previousStep} nextStep={this.nextStep}/>} 
      {page === 5 && <Step5Page previousStep={this.previousStep} />}        
     </div> 

    ) 
    } 
} 

目前，每个组件步骤页有2个按钮：上一个和下一个按钮，当被点击将更新状态称为页面。

这工作正常。但是，现在有一个请求使浏览器上的Back Button转到上一步。

我不确定我是否可以使用browser history，因为我仍处于相同的路线上。唯一改变的是名为page的组件状态，它由两个动作nextStep和PreviousStep触发。

有没有办法找出什么时候点击后退按钮并激活previousStep操作？

Answer 1

假设使用的是反应-路由器，就可以听到的变化：https://github.com/ReactTraining/history

相关片之中：

// Listen for changes to the current location. 
const unlisten = history.listen((location, action) => { 
    // location is an object like window.location 
    console.log(action, location.pathname, location.state) 
}) 

动作是PUSH之一，替换或POP取决于用户如何获得当前URL。