History API

History API в Atomico обеспечивает управление навигацией и состоянием истории браузера без полной перезагрузки страницы. Это ключевой инструмент при создании одностраничных приложений (SPA), где требуется динамическая смена маршрутов с сохранением состояния и возможности использования кнопок «назад» и «вперед».

Основные концепции

История браузера состоит из последовательности состояний, каждая из которых может содержать данные, URL и заголовок. Atomico предоставляет обёртку над стандартным History API, добавляя реактивность и удобные хуки для компонентов.

  • state — объект состояния, связанный с текущим URL.
  • pushState(data, title, url) — добавляет новую запись в историю без перезагрузки страницы.
  • replaceState(data, title, url) — заменяет текущую запись в истории.
  • popstate — событие, возникающее при переходе между записями истории (кнопки «назад/вперед»).

Работа с pushState и replaceState

Метод pushState используется для навигации к новому маршруту, сохраняя при этом возможность вернуться назад. В Atomico это часто интегрируется через хук useHistory.

import { useHistory } from "atomico";

function MyComponent() {
    const history = useHistory();

    function navigateToProfile() {
        history.pushState({ userId: 123 }, "Профиль пользователя", "/profile/123");
    }

    return <button oncl ick={navigateToProfile}>Перейти в профиль</button>;
}

Особенности:

  • data может содержать любое состояние компонента, которое будет доступно при возврате к этому URL.
  • title влияет на заголовок вкладки, однако его поддержка браузерами ограничена.
  • url не вызывает перезагрузку страницы, но изменяет адрес в адресной строке.

Метод replaceState применяется, если нужно обновить текущую запись, не добавляя новую:

history.replaceState({ ...history.state, updated: true }, "Обновлено", window.location.pathname);

Реактивное отслеживание изменений истории

Atomico позволяет отслеживать изменения истории через хук useHistory, который возвращает объект состояния и методы управления. Это упрощает синхронизацию маршрутов с компонентами и визуальными элементами:

import { useHistory } from "atomico";

function CurrentRoute() {
    const { state, location } = useHistory();

    return <div>Текущий путь: {location.pathname}, данные состояния: {JSON.stringify(state)}</div>;
}
  • state содержит объект состояния текущей записи истории.
  • location предоставляет актуальный URL, путь и параметры.

Обработка события popstate

Событие popstate срабатывает при возврате к предыдущей записи или переходе вперед. Atomico автоматически интегрирует это с хуком useHistory, что делает работу реактивной:

import { useHistory } from "atomico";

function HistoryLogger() {
    const history = useHistory();

    history.onPopState(({ state, location }) => {
        console.log("Поп-стейт:", state, "URL:", location.pathname);
    });

    return null;
}

Это позволяет компонентам обновляться автоматически при изменении истории, обеспечивая консистентность интерфейса.

Интеграция с маршрутизацией

History API является фундаментом для маршрутизаторов на Atomico. Можно создавать собственные решения или использовать готовые:

  • Состояние и URL синхронизируются без перезагрузки страницы.
  • Навигация через кнопки и ссылки автоматически обновляет компоненты.
  • Возможность сохранять данные между переходами повышает UX.

Пример минимального маршрутизатора:

import { useHistory, c } from "atomico";

function Router({ routes }) {
    const { location } = useHistory();
    const route = routes.find(r => r.path === location.pathname);
    
    return route ? c(route.component) : <div>Страница не найдена</div>;
}

Работа с query-параметрами и хэшами

History API поддерживает любые изменения URL, включая query-параметры и hash:

history.pushState({}, "", "/search?query=atomico#results");
  • window.location.search и window.location.hash можно использовать для извлечения параметров и состояния.
  • Atomico позволяет реагировать на эти изменения через useHistory, обеспечивая реактивное обновление компонентов.

Практические рекомендации

  • Использовать pushState для навигации на новые страницы.
  • Использовать replaceState для обновления текущего состояния без создания новой записи.
  • Всегда синхронизировать состояние компонентов с объектом state истории, чтобы сохранять данные при возврате назад.
  • Поддерживать обработку события popstate для корректного восстановления интерфейса.
  • При работе с query-параметрами и hash использовать реактивные вычисления, чтобы компоненты автоматически обновлялись.

History API в Atomico превращает стандартную навигацию браузера в мощный инструмент для SPA, делая маршруты реактивными, состояние управляемым, а переходы — плавными и без перезагрузки страницы.

Оглавление