Next.js useRouter con useEffect empuja incluso si la condición se cumple al actualizar la página.
Estoy teniendo un problema con useRouter
y useEffect
donde quiero redirigir al usuario si cierta condición no se cumple.
En la página 1 seleccionas una cantidad
que se pasa a un contexto y se recupera en la página 2.
En la página 2 tengo esta condición:
import { useEffect, useContext } from "react";
import { useRouter } from "next/router";
import AppContext from "../context/AppContext";
const PageTwo = () => {
const { amount } = useContext(AppContext);
const router = useRouter();
useEffect(() => {
if (!amount || amount == null) {
router.push("/page-1"); // redirige si no hay cantidad seleccionada
}
});
return (
...
);
};
Cuando llegamos a la página 2 tengo la cantidad
, pero cuando haces un refresh de la página te redirige de vuelta a page-1
incluso cuando hay una cantidad
establecida. Funciona bien cuando vas directamente a la page-2
, sin seleccionar una cantidad en page-1
, te redirige de vuelta a page-2
.
Quizás algo esté mal con la API de Context y/o useRouter y useEffect en este caso.
Aquí hay un ejemplo de CodeSanBox con el problema:
davy.ai
Problema con useRouter y useEffect en React
Me encuentro enfrentando un problema con
useRouter
yuseEffect
al redirigir al usuario cuando una cierta condición no se cumple.En
página-1
, el usuario selecciona unacantidad
que se pasa a un contexto y se recupera enpágina-2
. Ahora, enpágina-2
, me encuentro con el problema de que el usuario es redirigido apágina-1
incluso cuando hay unacantidad
establecida en el refresco de la página.Aquí está el fragmento de código:
Aquí hay un ejemplo de CodeSanBox con el problema: https://codesandbox.io/s/next-js-userouter-with-useeffect-6645u?file=/pages/page-2.js
No estoy seguro si me falta algo en mi implementación de la API de Contexto, el gancho
useRouter
o el ganchouseEffect
.