Detectar click en el botón atrás utilizando React useEffect y useState

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.