Estoy trabajando en una aplicación de chat y quiero que cada vez que el usuario abra un chat, debería mostrar el chat más reciente.
Entonces, para hacer eso, hice una función scrollToBottom() que se desplaza al final del chat después de 1 segundo, pero quiero que se ejecute cada vez que cambia la ruta. Intenté colocar router.query.id en la dependencia useEffect pero se ejecuta cada segundo automáticamente.
useEffect(() => { setTimeout(() => { scrollToBottom(); }, 1000); }, [router.query.id]); Básicamente, quiero que useEffect se ejecute solo cuando cambie router.query.id , es decir, solo cuando cambie la URL. ¿Cómo puedo hacer eso? La ayuda sería apreciada.
Puede usar los eventos incorporados de next/Router para detectar cambios de ruta.
const scroll = () => { setTimeout(() => { scrollToBottom(); }, 1000); }; useEffect(() => { Router.events.on('routeChangeStart', scroll) // Remember to remove event listeners on unmount return () => { Router.events.off('routeChangeStart', scroll); } }, []);