Vanilla Javascript - 无法获取/路由 - 错误

如何解决Vanilla Javascript - 无法获取/路由 - 错误

我的路由有问题。我在路由中使用了 Vanilla javascript 并且它有效，但是当我从 http://127.0.0.1:5500/ 转到 http://127.0.0.1:5500/about 然后刷新关于页面Cannot GET/about

我的 javascript 代码 - router.js 文件

const rootDiv = document.getElementById("root");

let home = "";
let about = "";
let contact = "";
let profile = "";

/**
 * @param {String} page
 * @returns {String}
 */

const loadPage = async (page) => {
  const response = await fetch(page);
  const resHtml = await response.text();
  return resHtml;
};

const loadAllPages = async () => {
  home = await loadPage("home.html");
  about = await loadPage("about.html");
  contact = await loadPage("contact.html");
  profile = await loadPage("profile.html");
};

const main = async () => {
  await loadAllPages();
  rootDiv.innerHTML = home;
  routes = {
    "/": home,"/contact": contact,"/about": about,"/profile": profile,};
};

main();

/**
 * @param {String} pathname
 */
const onNavigate = (pathname) => {
  window.history.pushState({},pathname,window.location.origin + pathname);
  rootDiv.innerHTML = routes[pathname];
};

window.onpopstate = () => {
  rootDiv.innerHTML = routes[window.location.pathname];
};

为什么我会收到这个错误？有人能帮我解决这个问题吗？ 所有 HTML 文件都在同一目录中。 任何帮助在这里将不胜感激！ 谢谢！！