Quiero navegar hacia atrás después de hacer clic en un botón de envío en un formulario para el que usé history.goBack pero en caso de que no haya una página/historial anterior, quiero navegar a una pantalla con un mensaje de agradecimiento usando history.replace.
const handleSubmit = () => { history.goBack(); // will do nothing if there's no previous history // If no prev history history.replace({pathname: `${url}/submit`}); }Ahora, en el caso de que haya un historial anterior, history.goBack navegaría a la página anterior, pero al ser asíncrono e history.replace al ser síncrono, primero navega a la página /submit y luego se ejecuta history.goBack. ¿Cómo espero la ejecución de history.goBack?
Al verificar la acción del historial:
const handleSubmit = () => { if (history.action !== 'POP') { history.goBack(); } history.replace({pathname: `${url}/submit`}); } action === 'POP' significa que es la carga inicial de su página, y también funciona cuando el usuario era de una URL externa
const handleSubmit = () => { if (history.length > 2) { // if history is not empty, go back: window.History.back(); } else if (url) { // go to specified fallback url: window.History.replaceState(null, null, url); } else { // go home: window.History.replaceState(null, null, '/'); } }intente este, esto es de la respuesta en esta publicación, Cómo verificar si el usuario puede retroceder en el historial del navegador o no , pero no siempre funciona.
En mi opinión, su tarea no se puede hacer, porque no hay forma de saber si hay un historial anterior. Además, su historial anterior almacenado en React no tiene nada que ver con el historial del navegador, porque un usuario podría visitar primero google.com y luego llegar a su sitio. Así que implementar esto no va a funcionar en absoluto. Sin mencionar que React en sí mismo es una aplicación de URL única, esto por supuesto complica un poco las cosas.
history.goBack(); // Register a popstate listener that executes only once during the next history entry change window.addEventListener('popstate', onPopStateCallback, {once: true});Cree un onPopStateCallback y puede hacer el reemplazo dentro de la devolución de llamada