I am working on a single page application, now stuck at routing, I have tried different ways but my code always returns 404. I need some help now

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

const routes = {
  404: 404. php ',  // http://localhost/spa/404.php',
  'index': 'index.php',
  'preparing': 'preparing.php',
  'completed': 'completed.php',
};

console.log("routes ", routes);

const handleLocation = async() => {
  const path = window.location.href;
  const route = routes[path] || routes[404];
  console.log("routes", route);
  const html = await fetch(route).then((data) => data.text());
  document.getElementById("main-nav").innerHTML = html;
};

window.onpopstate = handleLocation;
window.route = route;

handleLocation();