javascript - NextJS : Reloading Ads Javascript and Ad Slots on Route Change

Question

我有一个用于在我的 NextJS 网站上转换广告的自定义 javascript。这是由广告提供商/广告交易所提供的。
它看起来像这样:

<script type="text/javascript" src="//cdn.adsite.com/static/js/ad.js" ></script>

除此之外，我还有放置在网页上的 div 标签，例如:

<div id="ad-tag-6098" ></div>
<div id="ad-tag-6099" ></div>
<div id="ad-tag-6076" ></div>

这三个 div 标记是页面上的三个广告位，并使用 ad.js javascript 填充广告。
这适用于页面的正常加载/重新加载。
但是，当我使用内部导航路由器导航到页面时，不会触发此 javascript，也不会显示广告。
重新加载 ad.js 的正确方法是什么，以便 div 标签(广告位)正确显示广告，并且即使我们通过 nextjs 路由器导航也能正确刷新？你能帮忙吗？
更新:这个问题比我想象的还要深。仅仅重新加载 javascript 是不够的。由于这些是广告位，因此当页面转换/路线发生变化时，已使用的广告位会保留在内存中，因此广告脚本会将它们视为已显示。这会导致错误。
所需的行为如下:

渲染广告组件时，它定义广告位并显示它，

当路由改变时，所有定义的槽都会从内存中删除，

转到不同的页面后，该页面上的广告组件会定义新的广告位并显示它们。

Answer 1

您可能知道，但我想提醒您，NextJS 中有用于路由更改的监听器

  router.events.on('routeChangeComplete', handleRouteChange)
  router.events.off('routeChangeComplete', handleRouteChange)

当路线发生变化时，您可以借助这些事件重新加载脚本。您可以获取脚本并将其附加到正文脚本的末尾以进行每次路由更改。所以会重新启动adjs的内存
我希望这个 router.events 有所帮助，等待您的反馈。
更新:
根据您的评论，我想在这里更新。
在这些 router.events 的帮助下，您可以控制。您可以操作 DOM。它不应该是 React 特定的解决方案或 NextJS 特定的解决方案。您拥有 Javascript 的强大功能。
如果您是添加所有广告 div 的人，您可以添加一个数据属性以稍后选择这些 div。
例如，
假设您已添加此广告 div

<div id="ad-tag-6098" ></div> // instead of this!
<div id="ad-tag-6098" data-ad="true" ></div> // add this one!

通过使用 routeChangeStart 的事件router.events ，您可以选择具有 data-ad 属性的 div 并将它们的填充内容从 DOM 中删除 之前routeChangeComplete 事件和重新加载脚本时，它不应该抛出错误。

const adDivs = document.querySelectorAll('[data-ad="true"]'); // you can get these divs and remove the child of them before routeChangeComplete cycle

您如何看待我回答的这个更新部分，让我知道您的想法。