HTML Academy · Урок

Маршрутизация на основе хеша и пути

Сравните маршрутизацию по хешу с маршрутизацией истории на основе pushState

«Маршрутизация на основе хеша и пути» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Две стратегии для адресов SPA

SPA нужны адреса, которые браузер не загружает с сервера. Есть два подхода: на основе хэша использует фрагмент (всё после #), который браузер никогда не отправляет серверу, а на основе пути использует pathname вместе с приёмами History API.

Маршрутизация на основе хэша

Адреса выглядят так: https://example.com/#/about. Сервер видит только / и отдаёт один и тот же HTML для любого адреса. Клиентский JS читает location.hash, чтобы определить, какое представление отобразить. Это простой вариант, не требующий настройки сервера.

Событие hashchange

Маршрутизаторы на основе хэша слушают событие hashchange, которое срабатывает при каждом изменении location.hash. Вместе с чтением window.location.hash это весь API, необходимый для маршрутизации на стороне клиента, — API истории не используется.

window.addEventListener("hashchange", () => {
  const route = location.hash.slice(1) || "/";
  renderPage(route);
});

Маршрутизация на основе пути

Адреса выглядят так: https://example.com/about — их невозможно отличить от адресов страниц, отрисованных сервером. pushState API истории изменяет путь без перезагрузки; popstate срабатывает при переходах назад и вперёд; перехват нажатий превращает <a> в навигацию SPA.

Требуется настройка сервера

При маршрутизации на основе пути сервер должен возвращать index.html SPA для любого пути, который пользователь может открыть напрямую или обновить. Иначе обновление /about приводит к ошибке 404. Настройте правило: сначала искать файл, а при неудаче использовать index.html (резервный вариант истории в Nginx, vite-plugin-history-api в режиме разработки Vite).

# Nginx config
location / {
  try_files $uri $uri/ /index.html;
}

SEO и публикация ссылок

Поисковые системы и многие инструменты вообще не могут просматривать фрагменты хэша — содержимое по адресу /#/about невидимо для старых поисковых роботов (Google обрабатывает его с помощью рендеринга в безголовом браузере, другие могут этого не делать). Адреса на основе пути обычно индексируются, поэтому они однозначно лучше для SEO.

Восприятие пользователями

Адреса с хэшем заметно «странные» — пользователи видят # и могут не доверять ссылке или забыть скопировать полный адрес. Адреса на основе пути выглядят как любые другие веб-адреса, чего пользователи и ожидают. Уже по одной этой причине современные SPA почти всегда выбирают маршрутизацию на основе пути.

Сложность реализации

На основе хэша: примерно 10 строк JS (слушатель hashchange и отображение). На основе пути: вызовы pushState, слушатель popstate, перехват нажатий на ссылки и резервная обработка на сервере. Хэш — самый простой возможный вариант; путь требует дополнительной инфраструктуры для более удобной работы пользователей.

Особенности статического хостинга

Полностью статические хостинги (конфигурация GitHub Pages по умолчанию) не поддерживают резервную обработку на сервере, поэтому маршрутизация на основе пути ломается при обновлении страницы. Возможные решения: уловки с перенаправлением из 404.html, размещение на Netlify или Vercel (они поддерживают резервный вариант для SPA) либо выбор маршрутизации на основе хэша для проектов, предназначенных только для статического хостинга.

Гибридные подходы

Некоторые приложения сочетают оба подхода: путь используется для основного маршрута, а хэш — для разделов внутри страницы (модальных окон, якорей вкладок). Событие hashchange по-прежнему срабатывает для таких изменений и дополняет маршрутизатор на основе истории, не засоряя основной адрес состоянием дочерней страницы.

Переход между двумя подходами

Чтобы перейти с хэша на путь, перепишите все внутренние ссылки, добавьте резервную обработку на сервере, замените логику hashchange на popstate и перенаправьте старые адреса с хэшем на соответствующие адреса с путём с помощью небольшого загрузочного скрипта, который запускается один раз и вызывает history.replaceState.

Критерии выбора

Выбирайте подход на основе хэша для статических хостингов без правил перезаписи, внутренних административных инструментов, где SEO не имеет значения, и встроенных виджетов. Выбирайте подход на основе пути для всего, что предназначено для пользователей, должно индексироваться поисковиками или публиковаться в социальных сетях, — то есть для большинства приложений.

Проверка знаний

Почему маршрутизация SPA на основе пути требует настройки сервера, а маршрутизация на основе хэша — нет?

Итоги

Маршрутизация на основе хэша (адреса вроде /#/about) не требует настройки сервера, но плохо подходит для SEO и использует некрасивые адреса. Маршрутизация на основе пути (адреса вроде /about) требует резервной обработки на сервере с возвратом index.html, зато создаёт чистые адреса, удобные для SEO и публикации. Современные публичные SPA используют пути; проекты на статическом хостинге или внутренние проекты могут по-прежнему выбирать хэш ради простоты.

Часто задаваемые вопросы

Урок «Маршрутизация на основе хеша и пути» бесплатный?

Да — полный текст урока «Маршрутизация на основе хеша и пути» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Маршрутизация на основе хеша и пути»?

Сравните маршрутизацию по хешу с маршрутизацией истории на основе pushState Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Маршрутизация на основе хеша и пути»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy