Trigger Event Action lorsque le bouton Retour est Clicked dans React

Question

je le composant suivant

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> 

    ) 
    } 
} 

Actuellement, chaque page de composants Step a 2 boutons: A prev et un bouton à côté, qui, lorsque vous cliquez dessus mettra à jour l'état appelé page.

Cela fonctionne très bien. Cependant, il y a maintenant une demande pour activer le Back Button sur le navigateur pour passer à l'étape précédente.

Je ne suis pas sûr si je peux utiliser browser history parce que je suis toujours sur le même chemin. La seule chose qui change est l'état du composant appelé page qui est déclenché par les deux actions nextStep et PreviousStep.

Existe-t-il un moyen de savoir quand on clique sur le bouton Précédent et d'activer l'action previousStep?

Answer 1

En supposant que vous utilisez réagir routeur, vous pouvez écouter les changements: https://github.com/ReactTraining/history

La pièce être pertinente:

// 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) 
}) 

L'action est l'une des PUSH, REPLACE, ou POP selon comment l'utilisateur est arrivé à l'URL actuelle.