I am working on a SPA and having routing on router.js

const route = (event) => {
    event = event || window.event;
    event.preventDefault();
    window.history.pushState({}, "", event.target.href);
    handleLocation();
};

const mainpage = {
    404: "/pages/404.html",
    "/": "/pages/home.html",
    "/about": "/pages/about.html",
};

const sidesection = {
    404: "/blurbs/404.html",
    "/": "/blurbs/home.html",
    "/about": "/blurbs/about.html",
}

const handleLocation = async () => {
    const path = window.location.pathname;
    const main = mainpage[path] || mainpage[404];
    const main_html = await fetch(main).then((data) => data.text());
    const sidesec = sidesection[path] || sidesection[404];
    const sidesec_html = await fetch(sidesec).then((data) => data.text());
    document.getElementById("main").innerHTML = main_html;
    document.getElementById("side").innerHTML = sidesec_html;
};

window.onpopstate = handleLocation;
window.route = route;
handleLocation();

And index.html with these script

<script src="assets/js/router.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>

On home page / script runs very well and happy. But if I route to /about only corresponding html is rendered but none of the script runs. This happens even if I access /about first (and if I navigate back to / all 5 scripts run well).

The main.js including many script, but here is an example of one functionality not running at all in /about route (but runs well on / route, no matter how you accessing it).

function calculateSettingAsThemeString({ localStorageTheme, sessionStorageTheme, systemSettingDark }) {
    if (sessionStorageTheme !== null) { //firefox not saving localStorage between files
        return sessionStorageTheme;
    }
    if (localStorageTheme !== null) {
      return localStorageTheme;
    }
    if (systemSettingDark.matches) {
      return "dark";
    }
    return "light";
  }
  
  /**
  * Utility function to update the button text and aria-label.
  */
  function updateButton({ buttonEl, isDark }) {
    const newCta = isDark ? "☼" : "☾";
    // use an aria-label if you are omitting text on the button
    // and using a sun/moon icon, for example
    buttonEl.setAttribute("aria-label", newCta);
    buttonEl.innerText = newCta;
  }
  function updateThemeOnHtmlEl({ theme }) {
    document.querySelector("html").setAttribute("data-theme", theme);
  }
  const button = document.querySelector("[data-theme-toggle]");
  const localStorageTheme = localStorage.getItem("theme");
  const sessionStorageTheme = sessionStorage.getItem("theme");
  const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
  //take all 3 sources for current setting
  let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, sessionStorageTheme, systemSettingDark });
  updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
  updateThemeOnHtmlEl({ theme: currentThemeSetting });
  button.addEventListener("click", (event) => {
    const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
    localStorage.setItem("theme", newTheme);
    sessionStorage.setItem("theme", newTheme);
    updateButton({ buttonEl: button, isDark: newTheme === "dark" });
    updateThemeOnHtmlEl({ theme: newTheme });
    currentThemeSetting = newTheme;
  });

How can I fix script suddenly not runs when navigate to other routes? I am running locally with http-server --proxy http://localhost:8080?