0

Есть компонент который должен выводить баннер на страницах 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)}`)

1 ответ 1

0

Когда прогружается ваш скрипт, он в глобальной области создает переменную bannerDiv. При повторной загрузке скрипта, вы логично, получаете сообщение об ошибке, т.к. переменная уже создана.

Обойти это можно, обернув создание переменной и установку значений в функцию:

underMap.js

function randomInteger(min, max) {
  let rand = min + Math.random() * (max + 1 - min);
  return Math.floor(rand);
}

function showBanner() {
  const bannerDiv = document.querySelector("div#underMap");
  bannerDiv.classList.remove('d-none')
  bannerDiv.innerHTML = (`тест баннера ${randomInteger(1, 100)}`)  
}

showBanner();

Или обернуть все в анонимную функцию, что бы изолировать свои функции и переменные от внешнего окружения

(() => {
  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)}`)
})();

Не знаю вашу идею, но мутирование DOM в React приложении не силами React, это очень плохая практика.

2
  • Спасибо, помогло обернуть создание переменной и установить значений в функцию. Это не моя задумка. Это будут внешние скрипты от рекламодателей. Просто получается от них загружается баннер и пользователь может посмотреть 10 страниц, а баннер не перегружается и получается только один показ.
    – HappyPM
    15 дек 2022 в 17:16
  • @Yauheniy Я бы все равно рекомендовал бы подумать над тем, как это можно сделать исключительно силами React и next
    – SwaD
    15 дек 2022 в 17:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.