如何卸载next.js中页面更改上的next/script？

Question

我只想在某些页面上加载脚本。Next.js建议对其使用下一个/脚本标记。但是，当我导航到一些不同的页面时，我仍然可以看到body末尾的脚本。

​

​

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>
  );
};

我怀疑Next.js没有清理路由更改操作中的脚本。如何确保在页面更改时删除脚本？

Answer 1

我也面临着同样的问题。唯一适用于我的解决方案是重新加载页面作为routeChangeStart。我也是在一个定制的钩子中制作的，这样就可以轻松地重用了。

定制钩

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]);
}

用法：

import useScript from "../utils/useScript"

export default function index(){
    useScript("<script-ulr>");
}

Answer 2

您可以为每次渲染提供唯一的url。例如

<Script key={i} className='script-tag-js' src={`/path/to/script?v=${Math.random() * 999}`} type='module' />`

你也可以用这个钩子。

import React, { ReactNode, useState, useEffect } from "react"
import { useRouter } from "next/router"
import Script from "next/script"

const useScript = (paths: string[]) => {
 const [scriptTag, setScriptTag] = useState<ReactNode>(<></>)
    const router = useRouter()


    useEffect(() => {
        if (!router.isReady) return

        router.events.on("routeChangeStart", () => {
            setScriptTag(<></>)
        })

        setScriptTag(<>
            {paths.map((x, i) => {
                return <Script key={i} className='script-tag-js' src={`${x}?v=${Math.random() * 999}`} type='module' />
            })}
        </>)


        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [router.asPath, router.isReady])

    return { scriptTag }

}

export default useScript

const Container: FC<ContainerProps> = ({ children, headerType, scripts = [] }) => {

    const { scriptTag } = useScript(['/assets/scripts/helpers/header.js', '/assets/scripts/helpers/modal.js', ...scripts])

    return <>
        <Header type={headerType} />
        {children}
        {scriptTag}
        <Footer />
    </>
}

export default Container