¿Cómo resolver mi problema? En lugar de degradar, creé dos ganchos personalizados.

1. Gancho useCallbackPrompt
2. Gancho useBlocker

Gancho useCallbackPrompt Este gancho maneja una ventana emergente para mostrar y ocultar y actualizar la ubicación sobre la base de condiciones específicas. Como se ve.

Gancho useBlocker Este gancho impide que los usuarios naveguen si hay algún cambio

Cómo estoy usando useCallbackPrompt en mi componente

Creé el estado showDialog ; Si el usuario cambia algo en la página/formulario actual, actualizará el estado showDialog y si el usuario intenta salir, se mostrará el mensaje y se le preguntará si quiere quedarse o no.

Aquí está el enlace de demostración en vivo

Aquí está el ENLACE DE GITHUB REPO

Enlace para publicación

Puede usar usePrompt o useBlocker para detectar y mostrar un aviso antes de salir a otra ruta si tienen cambios no guardados (por ejemplo, en un elemento de formulario no guardado).

Sin embargo, en la documentación oficial de react router v6 se menciona lo siguiente:

de v5 (junto con usePrompt y useBlocker de las versiones beta de v6) no están incluidos en la versión actual de v6.

También verifiqué en Github, incluso la versión actual 6.2.1 no es compatible usePrompt y useBlocker .

Pero aún puede degradar a v5 o 6.0.0-alpha.5, el siguiente código funciona con el enrutador de reacción v6.0.0-alpha.5

 import React, { useState, useRef, useEffect } from "react"; import { BrowserRouter as Router, Switch, Route, Link, useHistory, usePrompt, useBlocker, Routes } from "react-router-dom"; // Sometimes you want to prevent the user from // navigating away from a page. The most common // use case is when they have entered some data // into a form but haven't submitted it yet, and // you don't want them to lose it. export default function PreventingTransitionsExample() { return ( <Router> <ul> <li> <Link to="/">Form</Link> </li> <li> <Link to="/one">One</Link> </li> <li> <Link to="/two">Two</Link> </li> </ul> <Routes> <Route path="/" exact children={<BlockingForm />} /> <Route path="/one" children={<h3>One</h3>} /> <Route path="/two" children={<h3>Two</h3>} /> </Routes> </Router> ); } function BlockingForm() { let [isBlocking, setIsBlocking] = useState(false); usePrompt( "Hello from usePrompt -- Are you sure you want to leave?", isBlocking ); // useBlocker( // () => "Hello from useBlocker -- are you sure you want to leave?", // isBlocking // ); return ( <form onSubmit={event => { event.preventDefault(); event.target.reset(); setIsBlocking(false); }} > <p> Blocking? {isBlocking ? "Yes, click a link or the back button" : "Nope"} </p> <p> <input size="50" placeholder="type something to block transitions" onChange={event => { setIsBlocking(event.target.value.length > 0); }} /> </p> <p> <button>Submit to stop blocking</button> </p> </form> ); }