Reactjs 更改路由器后自定义挂钩未运行

我有一个自定义的钩子来加载外部脚本。这是我的钩子：

    export default function useScript(scripts: string[]) {
        const [state, setState] = useState({
            loaded: false,
            error: false
        });

        useEffect(
            () => {
                scripts.forEach(src => {
                    if (cachedScripts.includes(src)) {
                        setState({
                            loaded: true,
                            error: false
                        });
                    } else {
                        cachedScripts.push(src);
                        // Create script
                        let script = document.createElement('script');
                        script.src = src;
                        script.async = true;
                        // Add script to document body
                        document.body.appendChild(script);
                    }
                })
            setState({
                loaded: true,
                error: false
            });
            },
            [] // Only re-run effect if script src changes
        );

        return [state.loaded, state.error];
    }


    const Scripts: React.FC = () => {
        const publicURL = process.env.PUBLIC_URL;
        useScripts(scripts);
        return (
            <>
            </>
        )
    };

    export default Scripts;

导出默认函数useScript（脚本：字符串[]）{
常量[状态，设置状态]=使用状态({
加载：false，
错误：false
});
使用效果(
() => {
scripts.forEach（src=>{
if（cachedscript.includes（src））{
设定状态({
是的，
错误：false
});
}否则{
cachedscript.push（src）；
//创建脚本
让script=document.createElement（'script'）；
script.src=src；
script.async=true；
//将脚本添加到文档体
document.body.appendChild（脚本）；
}
})
设定状态({
是的，
错误：false
});
},
[]//仅当脚本src更改时才重新运行
);
返回[state.loaded，state.error]；
}
常量脚本：React.FC=（）=>{
const publicURL=process.env.PUBLIC\u URL；
使用脚本（脚本）；
返回(
)
};
导出默认脚本；

它在第一次工作一次，但当它不再工作。我把代码稍微改一下-

    const Scripts: React.FC = () => {
        const publicURL = process.env.PUBLIC_URL;
         useEffect(() => {
             scripts.forEach(src => {
                 let script = document.createElement('script');
                 script.src = src;
                 script.async = true;
                 document.body.appendChild(script);
             })
         }, []);
        return (
            <>
            </>
        )
    };

export default Scripts;

const脚本：React.FC=（）=>{
const publicURL=process.env.PUBLIC\u URL；
useffect（（）=>{
scripts.forEach（src=>{
让script=document.createElement（'script'）；
script.src=src；
script.async=true；
document.body.appendChild（脚本）；
})
}, []);
返回(
)
};
导出默认脚本；

---

它奏效了，但我不知道为什么。有人能给我解释一下吗？提前感谢

这看起来不是一点变化。。不知道您所说的

是什么意思，它起作用了

，因为第二个版本在安装

时应该只运行一次，与第一个版本相同。。唯一的区别似乎是关于

cachedscript

@Aprillion我买了一个html模板，所以它有大量的外部脚本。当我切换到第二个版本时，它的脚本可以在我在屏幕之间路由后运行，但在第一个版本中它只运行一次