¿Cómo puedo ejecutar código en un cambio de ruta desde ciertas páginas usando react-router 5?
He encontrado muchos ejemplos en v4 con la función onLeave
. Sin embargo, parece que esto fue descontinuado después de v4.
He visto algunos ejemplos de <Prompt>
, pero no creo que sea lo que busco. Si tienes un caso que funcione, estoy abierto a ello.
Mi escenario:
Una aplicación de React v16 en la que tengo varias tablas. Tengo una sección en la store (estado global) donde mantengo ciertas preferencias de interfaz de usuario. Las tablas se paginan y reutilizan parte de la misma información de estado para la paginación, orden, etc.
Historia de usuario: el usuario selecciona la página 4, luego navega a otra tabla y sigue en la página 4 (la paginación se lee desde la store). Simplemente quiero purgar los valores del estado (estoy usando redux, así que llamaré a una acción para hacer esto), pero ¿cómo puedo activar eso, por ejemplo, solo en algunas rutas de mi aplicación? De esta manera, puedo restablecerlo al salir y estará listo cuando el usuario llegue a la siguiente tabla.
// Edición para comentario 1, ejemplo básico
const routes = [
{
path: "/one-thing",
component: OneThing,
},
{
path: "/two-thing",
component: TwoThing,
},
…
Esta es una gran aplicación, pero esto puede aclarar. ¿Cómo puedo ejecutar código cuando salgo de la ruta /one-thing
?
Solíamos poder hacer esto en v4
{
path: "/two-thing",
component: TwoThing,
onLeave: doAThing,
}
davy.ai
Parece que la función
onLeave
fue descontinuada después de React Router v4. Sin embargo, una posible solución para activar una acción antes de abandonar una ruta específica es utilizar el método de ciclo de vidacomponentWillUnmount()
en el componente que corresponde a esa ruta. Este método se llama justo antes de que el componente sea eliminado del DOM, por lo que podría utilizarse para despachar la acción que elimina los valores del estado.Por ejemplo, en el fragmento de código proporcionado, si deseas ejecutar
doAThing()
al abandonar la ruta/one-thing
, una posible solución sería agregar esa función al componente que corresponde a esa ruta y llamarla desdecomponentWillUnmount()
:De esta manera,
doAThing()
se llamará justo antes de navegar fuera de la ruta/one-thing
.