Mientras trabajaba en un proyecto, noté un comportamiento extraño del useLocation el que no puedo encontrar una explicación.
Tengo un botón que, cuando se hace clic, lo redirigirá a una página EditOrder y pasará un estado con él:
const navigate = useNavigate(); const handleClick = (data) => { navigate("edit-order", {state: {order: data}}) }; En la página EditOrder , verifico con un UseEffect si se proporcionó un state y, de lo contrario, el usuario será redirigido a una página diferente:
const { state } = useLocation(); const navigate = useNavigate(); useEffect(() => { if (!state) { navigate("some-page"); } }, []); La parte rara es que cuando actualizo la página todavía puedo acceder a ella, y si hago console.log(state.order) los datos siguen ahí, incluso cuando vuelvo a cargar con ctrl + shift + r , el estado sigue siendo el mismo, y esto también sucede con la empty cache and hard reload option (probado tanto en Chrome como en Edge).
Pero cuando copio la URL y la paso en una nueva pestaña, inmediatamente me redirigen a "alguna página" y console.log(state) mostrará null .
Revisé tanto las cookies como el almacenamiento local y no puedo encontrar los datos de estado allí.
¿Alguien puede explicar por qué sucede esto y cómo se guardan los datos de estado?
Editar:
Aquí hay un video de youtube que muestra este comportamiento.
El código en el video se puede encontrar en este sandbox , cuando ejecuta el código en sandbox, se ejecuta como debería, al actualizar todos los estados se restablecen, pero cuando se ejecuta localmente ocurre este problema (en 2 computadoras diferentes).
useLocation de React se basa en la biblioteca de historial , que usa BrowserHistory en las aplicaciones web.
Algunos navegadores , como Chrome, conservan el estado del BrowserHistory del navegador entre sesiones, mientras que otros (como Firefox) no lo hacen.
Esta es probablemente la razón por la que está viendo este comportamiento localmente pero no en un Sandbox. Parece que el navegador de CodeSandbox borra el estado del historial al actualizar. También es por eso que, si copia la URL en otra pestaña, la redirección funciona. BrowserHistory es local para una sola pestaña.
En resumen, este es el comportamiento previsto. O necesita borrar el estado del historial manualmente o almacenar el estado de su aplicación en otro lugar ( useContext podría ser una buena opción si desea persistir en las páginas pero no en una actualización).