Next.js项目中next/link路由导致脚本组件残留问题求助

方法1：监听路由切换主动清理 #

Next.js的next/router支持监听路由变化，你可以在myTemplate1组件中添加监听逻辑，当路由跳离当前页面时直接销毁工具箱：

import { useRouter } from 'next/router';
import { useEffect } from 'react';

function MyTemplate1() {
  const router = useRouter();

  useEffect(() => {
    const cleanUpToolbox = (url) => {
      // 判断是否跳离当前页面，这里假设当前页路径为'/template1'
      if (!url.includes('/template1')) {
        // 优先调用脚本自带的销毁方法（如果myscript.js全局暴露了该方法）
        if (window.destroyVirtualToolbox) {
          window.destroyVirtualToolbox();
        } else {
          // 无销毁方法则直接删除工具箱DOM元素（需确认元素ID）
          const toolbox = document.getElementById('virtual-toolbox');
          if (toolbox) toolbox.remove();
        }
      }
    };

    router.events.on('routeChangeComplete', cleanUpToolbox);
    // 组件卸载时取消监听，避免内存泄漏
    return () => router.events.off('routeChangeComplete', cleanUpToolbox);
  }, [router]);

  return (
    <>
      {renderComponents()}
      <script src="myscript.js" />
    </>
  );
}

方法2：封装工具箱为React组件，利用卸载钩子清理 #

把工具箱的初始化和销毁逻辑封装成独立React组件，借助组件卸载时的清理函数自动处理：

function VirtualToolbox() {
  useEffect(() => {
    // 初始化工具箱（需确保myscript.js已加载并全局可用）
    window.initVirtualToolbox();

    return () => {
      // 组件卸载时执行清理
      if (window.destroyVirtualToolbox) {
        window.destroyVirtualToolbox();
      } else {
        const toolbox = document.getElementById('virtual-toolbox');
        if (toolbox) toolbox.remove();
      }
    };
  }, []);

  return null; // 无需渲染DOM，仅处理逻辑
}

// 在MyTemplate1中使用该组件
function MyTemplate1() {
  return (
    <>
      {renderComponents()}
      <VirtualToolbox />
      <script src="myscript.js" />
    </>
  );
}

方法3：动态加载脚本，离开时移除脚本+清理DOM #

如果myscript.js未提供销毁方法，可以动态创建脚本标签，页面跳转时同时移除脚本和工具箱DOM：

import { useRouter } from 'next/router';
import { useEffect } from 'react';

function MyTemplate1() {
  const router = useRouter();

  useEffect(() => {
    let scriptTag;
    // 动态创建并加载脚本
    scriptTag = document.createElement('script');
    scriptTag.src = 'myscript.js';
    document.body.appendChild(scriptTag);

    const handleRouteLeave = (url) => {
      if (!url.includes('/template1')) {
        // 移除脚本标签
        if (scriptTag) document.body.removeChild(scriptTag);
        // 删除工具箱DOM元素
        const toolbox = document.getElementById('virtual-toolbox');
        if (toolbox) toolbox.remove();
      }
    };

    router.events.on('routeChangeComplete', handleRouteLeave);

    return () => {
      router.events.off('routeChangeComplete', handleRouteLeave);
      // 组件卸载时再次执行清理
      if (scriptTag) document.body.removeChild(scriptTag);
      const toolbox = document.getElementById('virtual-toolbox');
      if (toolbox) toolbox.remove();
    };
  }, [router]);

  return <>{renderComponents()}</>;
}

注意事项 #

• 优先使用脚本自带的销毁方法，比直接删除DOM更可靠，能避免内存泄漏
• 若只能删除DOM，需确认工具箱元素的选择器（ID或类名）准确无误
• 路由监听事件必须在组件卸载时取消，防止不必要的内存占用

内容的提问来源于stack exchange，提问作者Teo