Как я могу вставить код HTML и JavaScript из другого файла?

Вам нужно получить элементы скрипта из div pageContent, клонировать их и добавить в document.head. Вам просто нужно изменить функцию routeTo.

Ваша функция routeTo станет такой:

function routeTo(path) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'components/' + path + '.html', true);
    xhr.onreadystatechange = function () {
        if (this.readyState !== 4) return;
        if (this.status !== 200) return; // or whatever error handling you want
        document.getElementById('pageContent').innerHTML = this.responseText;
        /* Loop For The Scripts Inside The pageCont DIV */
        for (script of document.getElementById('pageContent').querySelectorAll('script')) {
            var scriptElem = document.createElement('script');
            if (script.src !== '' && typeof script.src !== 'undefined') {
                scriptElem.src = script.src;
            } else {
                scriptElem.innerHTML = script.innerHTML;
            }
            
            /* Remove the old script from pageContent div */
            script.parentNode.removeChild(script);
            
            /* Check if scriptElem exists or not */
            var scriptExists = (function() {
                for (elem of document.querySelectorAll('script')) {
                    if (elem.outerHTML === scriptElem.outerHTML) return true;
                }
                return false;
            })();
            
            /* If script doesn't exists, append it to the head */
            if (!scriptExists) {
             document.head.appendChild(scriptElem);
            }
        }
    };
    xhr.send();
}

Это даже поддерживает внешние сценарии (т. е. сценарии с атрибутом src, установленным для другого файла JavaScript).

Теперь это предотвратит дублирование скрипта и удалит скрипт из div pageContent, как только скрипт будет добавлен к заголовку.

Попробуйте этот скрипт, который проверит, загружен ли JS.

Я не проверял это вживую. Я могу сделать это на днях, так как это интригует

const head = document.querySelector("head");
const scriptIsLoaded = (script, src) => {
  const pageScripts = document.querySelectorAll('script');
  if (src) {
    // this may need some testing (pageScripts src = "jquery.js", script src = "https://....jQuery.js"
    return pageScripts.find(pageScript => pageScript.src.endsWith(script));
  }
  return pageScripts.find(pageScript => pageScript.textContent.replace(/\s+/g, "") === script.textContent.replace(/\s+/g, "")); // compare text with all whitespace removed.
}
const routeTo = (path) => {
  const url = `components/${path}.html`;
  fetch(url)
    .then((response) => response.text())
    .then((html) => {
      // Convert the HTML string into a document object
      var parser = new DOMParser();
      var doc = parser.parseFromString(html, 'text/html');
      document.getElementById('pageContent').innerHTML = html; // load the page
      // Get the script files
      doc.querySelectorAll('script').forEach(script => {
        const src = script.src;
        if (src) {
          if (scriptIsLoaded(src, true)) return; // already loaded
          let scriptObject = document.createElement("script");
          scriptObject.src = src;
          head.appendChild(scriptObject)
        } else {
          const text = script.textContent;
          if (text) {
            if (scriptIsLoaded(scriptObject)) return; // textContent already in a script
            let scriptObject = document.createElement("script");
            scriptObject.textContent = scriptObject.textContent;
            head.appendChild(scriptObject)
          }
        }
      });
    }).catch(function(err) {
      // There was an error
      console.warn('Something went wrong.', err);
    });
};