Imagina que tenemos las siguientes dos rutas:
viewRoute = { name: "View Route", pattern: "/route/view" } editRoute = { name: "Edit Route", pattern: "/route/edit", beforeExit: (fromState, toState, routerStore) => { if (/* route change was triggered by browser button */) { if (confirm("Do you want to discard changes?") { return toState; } else { return fromState; } } } }Si el usuario redirige de "editar" a "ver" la ruta haciendo clic en los botones "cancelar" o "guardar", no quiero mostrar el cuadro de diálogo descartar-confirmar. Pero si usan los botones del navegador, yo sí.
¿Cómo puedo determinar dentro de un enlace de transición de ruta si ese cambio de ruta fue activado por un botón del navegador? O alternativamente, mediante una llamada directa a routerStore.goTo() ?
Encontré una manera de identificar si una ruta se cambió haciendo clic en un botón, aprovechando RouterState.options para pasar el estado personalizado al gancho de transición.
De componente:
const Component = () => { const cancelEditing = () => { routerStore.goTo("Edit Route", {}, {ignoreDiscard: true}); } return <button onClick={cancelEditing}>{"Cancel"}</button>; }Del gancho de transición:
beforeExit: (fromState, toState) => { if (!toState.options.ignoreDiscard) { if (confirm("Do you want to discard changes?") { return toState; } else { return fromState; } } }Este estado no se conserva, por lo que al hacer clic en los botones de avance/retroceso del navegador siempre aparecerá un cuadro de diálogo emergente.
Desafortunadamente, este método solo se puede lograr llamando a RouterStore.goTo() directamente ya que no hay accesorios en RouterLink llamados options .