Detectar click en el botón atrás utilizando React useEffect y useState
Al trabajar en la navegación de una aplicación web, es común necesitar manejar el botón atrás, en esta situación, saber cuándo se hizo click es necesario.
En este ejemplo se utilizar react-router para crear una pequeña aplicación con una navegación por secciones
y creamos un component que utiliza el manejador de evento window.onpopstate dentro del hook useEffect para detectar el click del botón.
Matías Hernández: [0:02] Esta es una pequeña aplicación que utiliza react-router para mostrar diferentes links y secciones. Contiene un Switch sobre tres rutas. Cada una de ellas muestra un contenido diferente.
[0:16] Para escuchar el botón regresar o Back button, creamos un componente que llamamos BackButtonListener. En él utilizaremos los hook useEffect y useState.
[0:24] Primero, definiremos un estado con useState, que retorna una dupla cuyo primer valor es el valor del estado, que llamaremos pressed, y el segundo valor en la función dispatch, que llamaremos setPressed. El estado inicia con un valor false.
[0:39] Ahora utilizaremos el hook useEffect para agregar el manejador de eventos onpopstate del objeto window. El evento onpopstate es un efecto secundario. onpopstate se define como una función manejadora. En ella utilizaremos la función dispatch setPressed para cambiar el estado a true.
[0:59] Ahora simplemente renderizamos el valor de la variable pressed, que es un booleano y utilizamos toString para desplegarlo en pantalla.