Есть компонент который должен выводить баннер на страницах SSG. Проблема в том что при первой загрузке (или перезагрузки страницы) скрипт отрабатывает отлично и выводит текст на странице "тест баннера XX" и в консоль "Script has loaded v.XXXXX", но при переходе на другие страницы в консоли ошибка: "Uncaught SyntaxError: Identifier 'bannerDiv' has already been declared".
Функция handleRouteChange
при переходе по страницам тоже отлично отрабатывает и выводит корректно "URL изменен на XX v.1671094719667".
Пользоваться полной перезагрузкой страницы, теряется весь смысл и преимущества NEXTJS. Но как реализовать принудительную перезагрузку только внешнего скрипта при смене URL?
Компонент баннера подгружается Dynamic Import https://nextjs.org/docs/advanced-features/dynamic-import
import { Suspense } from 'react'
import dynamic from "next/dynamic"
const UnderMap = dynamic(() => import("@components/bannerScripts/UnderMap"), { ssr:false })
...
return (
...
<Suspense
fallback={`Загрузка...`}
>
<UnderMap />
</Suspense>
)
Сам компонент UnderMap:
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import Script from 'next/script'
export default function UnderMap({ }) {
const router = useRouter();
const unique_id = new Date().getTime();
const handleRouteChange = (url) => {
console.log(`URL изменен на ${url} v.${unique_id}`)
}
useEffect(() => {
router.events.on('routeChangeStart', handleRouteChange)
return () => {
router.events.off('routeChangeStart', handleRouteChange)
}
}, [])
// debugger;
return (
<>
<div
id="underMap"
className="d-none my-3"
>
по умолчанию скрыт
</div>
<Script
src={`https://ВНЕШНЯЯ_ССЫЛКА/_r/underMap.js?cacheControl=${unique_id}`}
strategy="afterInteractive"
onLoad={() => {
console.log(`Script has loaded v.${unique_id}`)
}}
/>
</>
)
}
Скрипт underMap.js
function randomInteger(min, max) {
let rand = min + Math.random() * (max + 1 - min);
return Math.floor(rand);
}
const bannerDiv = document.querySelector("div#underMap");
bannerDiv.classList.remove('d-none')
bannerDiv.innerHTML = (`тест баннера ${randomInteger(1, 100)}`)