Tengo dificultades para entender un problema de navegación hacia atrás que ocurre en nuestro proyecto.

Estamos trabajando en un entorno React (v17), con react-router-dom (v6) y representamos un iframe en un servicio de terceros (por lo tanto, el iframe src está en un dominio diferente) en nuestra página (el problema también ocurre en NextJS).

La página que representa el iframe obtiene la URL del estado de navegación (usando useLocation() de react-router-dom) y la coloca en el iframe src.

Cuando presionamos el botón de retroceso del navegador (o usamos history.back() , o history.go(-1) en la consola del navegador, o navigate(-1) desde el useNavigate ), no sucede nada más que el contenido del iframe que se vuelve a cargar.

No se envía ningún evento popstate y el historial del navegador no cambia.

Si codifico la URL del iframe (para no leer el valor de otro lugar), todo funciona como se esperaba. Además, si actualizo la página, las cosas también funcionan bien si presiono el botón Atrás dos veces (¯\ (ツ) /¯)

Encontré este interesante artículo sobre la navegación hacia atrás con React y iframes. Intenté agregar una clave al iframe (como Date.now() ) pero nada cambia.

Aquí hay algunos componentes de boceto para armar las cosas.

Página 1

 const Page1 = () => { const navigate = useNavigate(); // in our case we are using a GraphQL mutation. // this is just for demonstration purposes return <button onClick={() => { fetchIFrameURLOnTheServer() .then(url => navigate('/page2', { state: { url } })) }}> go to iframe page </button> }

Página 2

 const Page2 = () => { const location = useLocation(); const { url } = location.state; return <iframe src={url} key={Date.now()} />; }

Declaración de enrutador

 <BrowserRouter> <Routes> <Route element={<Layout />}> // <-- renders the <Outlet /> <Route path='path1' element={Page1}/> <Route path='path2' element={Page2}/> </Route> </Routes> </BrowserRouter>

Me gustaría entender qué pasó y estoy buscando ayuda :P Gracias por su ayuda 🙏