Tengo tres componentes C1, C2, C3 mapeados en las rutas /c1 , /c2/ , /c3 .
Quiero evitar que el componente C3 permita (a través del manejo de eventos del navegador) volver a C2 y, en su lugar, ir directamente a C1 .
¿Cómo logro esto?
Esta funcionalidad es necesaria porque C2 actúa como "post-and-redirect". Imagine casos en los que el navegador realiza una operación POST y, cuando actualiza la página, le pregunta si desea volver a enviar el formulario. Bueno, ese es exactamente mi caso.
En este caso, puede redirigir el flujo para mantener la pila de historial que desee. Al hacerlo, cualquier navegación hacia atrás (imperativa/declarativa del código o del botón Atrás del navegador) da como resultado volver a la página correcta a la que desea que el usuario regrese.
| Acción | Pila de historial | Sendero | Atrás Ubicación |
|---|---|---|---|
| inicial | ["/"] | "/" | ~ |
| EMPUJAR "/c1" | ["/", "/c1"] | "/c2" | "/" |
| EMPUJAR "/c1/c2" | ["/c1", "/c1/c2"] | "/c1/c2" | "/c1" |
| REEMPLAZAR "/c1/c3" | ["/c1", "/c1/c3"] | "/c1/c3" | "/c1" |
| POP (1) | ["/c1"] | "/c1" | ~ |
Para usar la navegación imperativa en react-router-dom :
v5 usa el useHistory
history.push para la navegación normalhistory.replace para redirigirhistory.back o `history.go(-1) para retroceder una página v6 usa el useNavigate .
navigate(to) para la navegación normalnavigate(to, { replace: true }) para redirigirnavigate(-1) para volver a una página