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

Question

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

    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;

它第一次工作一次，但是当重定向路由器时，它不再工作。我将代码更改为-

    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;

它奏效了，但我不知道为什么。谁能为我解释一下？预先感谢