0
423
Visualizações¿Cómo desmontar next/script en el cambio de página en next.js?
Quiero cargar un script solo en ciertas páginas. Next.js recomienda usar la etiqueta next/script para ello. Sin embargo, cuando navego a algunas páginas diferentes, aún puedo ver el script presente al final del body en HTML.
import Script from "next/script"; const Comments = () => { return ( <div className="giscus mt-16"> <Script src="https://giscus.app/client.js" data-repo="GorvGoyl/Personal-Site-Gourav.io" data-repo-id="MDEwOlJlcG9zaXRvcnkyOTAyNjQ4MTU=" data-category="Announcements" data-category-id="DIC_kwDOEU0W784CAvcn" data-mapping="pathname" data-reactions-enabled="0" data-emit-metadata="0" data-theme="light" data-lang="en" crossOrigin="anonymous" strategy="lazyOnload" onError={(e) => { console.error("giscus script failed to load", e); }} ></Script> </div> ); };Sospecho que Next.js no está limpiando el script en la acción de cambio de ruta. ¿Cómo me aseguro de que los scripts se eliminen al cambiar de página?
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Estaba enfrentando el mismo problema. La única solución que funciona para mí es volver a cargar la página como routeChangeStart . También lo hice en un gancho personalizado para que pueda reutilizarse con facilidad.
Gancho personalizado
import { useRouter } from "next/router"; import { useEffect } from "react"; export default function useScript(url) { const router = useRouter(); useEffect(() => { const script = document.createElement("script"); script.src = url; script.async = true; document.body.appendChild(script); // Needed for cleaning residue left by the external script that can only be removed by reloading the page const onRouterChange = () => { router.reload(); }; router.events.on("routeChangeStart", onRouterChange); return () => { router.events.off("routeChangeStart", onRouterChange); document.body.removeChild(script); }; }, [router]); }Uso:
import useScript from "../utils/useScript" export default function index(){ useScript("<script-ulr>"); }
·
Juan Pablo Isaza
Relatório
Responde à pergunta