0

Код на Vanills js, SPA

При обновлении любой страницы, кроме главной, вылетает ошибка 404.

Роутер:

"use strict";

const routes = {
  "/": "./pages/activity.html",
  "/home": "./pages/activity.html",
  "/map": "./pages/map.html",
  "/time": "./pages/time.html",
};

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

const handleLocation = async () => {
  const parsePath = window.location.pathname.split("/");
  const path = "/" + parsePath[parsePath.length - 1];
  const html = await fetch(routes[path]).then((data) => data.text());
  document.getElementById("app").innerHTML = html;

  updateActiveButtons(path);
};

// Отслеживает back, go
window.addEventListener("popstate", handleLocation);

// Для начальной обработки
document.addEventListener("DOMContentLoaded", handleLocation);

Кнопка для перехода на страницу:

<a href="map">
  <p>Map</p>
</a>

4
  • 404 - значит физически такой страницы нет. Тебе нужно чтобы твой сервер, на такого типа запросы, тебе возвращал твою "главную" страницу, которая так же будет подгружать нужное, которое зависит от указанного УРЛ.
    – ksa
    Commented 15 мая 2023 в 8:15
  • хм, спасибо. не подскажешь, как на чистом js отловить 404 и перенаправить? и можешь ли сказать, почему физически страницы нет, ведь я перезагружаю существующую?
    – Тыква
    Commented 15 мая 2023 в 12:42
  • отловить думаю можно через фетч->кетч
    – Тыква
    Commented 15 мая 2023 в 12:42
  • Вот смотри, ты открыл index.html (она есть) УРЛ http://test, поменял УРЛ http://test/info, сделал перехват этого. Подгрузил что нужно. Потом обновляешь и это уже не index.html, идет запрос на другой УРЛ и именно этой http://test/info страницы нет.
    – ksa
    Commented 15 мая 2023 в 12:46

1 ответ 1

0

Если кто-то тоже столкнулся с такой проблемой на github pages, то отловить такую ошибку можно создав в корне проекта файл 404.html, теперь дефолтная страница заменится на кастомную, в которой можно уже хендлер прописать

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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