当我在 React 中导航和返回页面时，我看不到脚本添加的广告

Question

我有一个小型 React 应用程序，我应该在其中添加广告。我有一个脚本可以将广告加载到 ins 占位符。

import { useEffect } from 'react';

function AdsComponent() {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://example.example.net/js/code.min.js';
        script.async = true;
        script.setAttribute('data-cfasync', 'false');
        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };
    }, []);

    return (
        <div className='mt-[2rem] mr-[2rem]'>
            <ins className='aso-zone' data-zone='96230'></ins>
            <ins className='aso-zone' data-zone='96231'></ins>
        </div>
    );
}

export default AdsComponent;

问题： 当我导航到另一个页面并返回到带有广告的页面时。广告没有显示。
初始页面加载或刷新

导航到另一个页面并返回：

.

有没有办法确保在导航时重新加载广告？

Answer 1

我发现问题出在广告服务提供商。我管理 通过将初始加载时的广告缓存到会话存储来解决问题 并在后续重新渲染时使用缓存版本