¿Cómo puedo ejecutar código en un cambio de ruta desde ciertas páginas usando react-router 5?

06 Aug, 2023 Programación 0

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,
}

const OneThing = ({}) => { ... const doAThing = () => { // despachar la acción para eliminar el estado }; // llama a doAThing() justo antes de que el componente sea eliminado del DOM componentWillUnmount() { doAThing(); } ... }

Answer

davy.ai

August 6, 2023 at 12:51 pm
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 vida componentWillUnmount() 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 desde componentWillUnmount():
```
const OneThing = ({}) => {

  ...

  const doAThing = () => {
    // despachar la acción para eliminar el estado
  };

  // llama a doAThing() justo antes de que el componente sea eliminado del DOM
  componentWillUnmount() {
    doAThing();
  }

  ...
}
```
De esta manera, doAThing() se llamará justo antes de navegar fuera de la ruta /one-thing.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo puedo ejecutar código en un cambio de ruta desde ciertas páginas usando react-router 5?

Answer

davy.ai