es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Next.js useRouter con useEffect empuja incluso si la condición se cumple al actualizar la página.

Next.js useRouter con useEffect empuja incluso si la condición se cumple al actualizar la página.

28 May, 2023 Programación

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:

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Problema con useRouter y useEffect en React

    Me encuentro enfrentando un problema con useRouter y useEffect al redirigir al usuario cuando una cierta condición no se cumple.

    En página-1, el usuario selecciona una cantidad que se pasa a un contexto y se recupera en página-2. Ahora, en página-2, me encuentro con el problema de que el usuario es redirigido a página-1 incluso cuando hay una cantidad establecida en el refresco de la página.

    Aquí está el fragmento de código:

    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"); // redirect if no amount is selected
    }
  });

  return (
    // Mi contenido de página 2 va aquí
  );
};

    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 gancho useEffect.

Comments are closed.