Preact Router

Preact Router — это легковесная библиотека для организации маршрутизации в приложениях на Preact. Она обеспечивает управление навигацией между компонентами без перезагрузки страницы, реализуя подход Single Page Application (SPA). Основная задача маршрутизатора — сопоставление URL с определёнными компонентами и управление состоянием истории браузера.

Установка и подключение

Для использования Preact Router необходимо установить пакет через npm или yarn:

npm install preact-router
# или
yarn add preact-router

После установки импортируются ключевые элементы:

import { Router, Route } from 'preact-router';

Router — контейнер маршрутов, Route — отдельный маршрут (опционально, можно использовать JSX внутри Router напрямую).

Определение маршрутов

Маршруты задаются с помощью атрибута path, а компонент, отображаемый по маршруту — через component.

import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

<Router>
  <Home path="/" />
  <About path="/about" />
  <Contact path="/contact" />
</Router>

Поддерживаются динамические параметры через двоеточие ::

<UserProfile path="/user/:id" />

В компонент UserProfile будет передан объект props, содержащий параметр id.

Навигация между страницами

Для переходов используется стандартный <a> с href или функция route из preact-router.

import { route } from 'preact-router';

<button onCl ick={() => route('/about')}>О нас</button>

Функция route позволяет программно изменять маршрут без обновления страницы.

Обработка несуществующих маршрутов

Для маршрутов, которые не совпадают с заданными, можно задать компонент для 404:

<Router>
  <Home path="/" />
  <About path="/about" />
  <NotFound default />
</Router>

Атрибут default указывает, что компонент должен рендериться при отсутствии совпадений.

Вложенные маршруты

Preact Router поддерживает вложенные маршруты, что позволяет строить сложные структуры страниц:

<Router>
  <Dashboard path="/dashboard">
    <Stats path="/stats" />
    <Settings path="/settings" />
  </Dashboard>
</Router>

Вложенные маршруты рендерятся в дочернем компоненте, который должен содержать <Router> внутри себя.

Обработка событий маршрутизатора

Router поддерживает событие onChange, которое вызывается при каждом изменении маршрута.

<Router onCha nge={handleRoute}>
  <Home path="/" />
  <About path="/about" />
</Router>

function handleRoute(e) {
  console.log('Текущий путь:', e.url);
}

Событие предоставляет объект с информацией о текущем маршруте: url, matches, previous. Это позволяет реализовать кастомную логику, например, анимацию переходов или обновление мета-тегов.

Lazy-loading компонентов

Для оптимизации загрузки можно использовать динамический импорт компонентов:

import { lazy } from 'preact/compat';

const About = lazy(() => import('./pages/About'));

<Router>
  <Home path="/" />
  <About path="/about" />
</Router>

Компонент подгружается только при переходе на соответствующий маршрут, что снижает начальный размер бандла.

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

Preact Router не обрабатывает query-параметры напрямую. Они доступны через объект location браузера:

function SearchPage() {
  const params = new URLSearchParams(window.location.search);
  const query = params.get('q');
  return <div>Результаты поиска: {query}</div>;
}

Для полноценной работы с query-параметрами можно использовать сторонние утилиты или кастомные хуки.

Переходы с сохранением истории

Router использует History API браузера, что позволяет:

  • возвращаться назад (window.history.back());
  • переходить вперёд (window.history.forward());
  • управлять состоянием истории через route('/path', true) для замены текущего маршрута без добавления в историю.

Оптимизация производительности

Preact Router минимально нагружает приложение за счёт:

  • отсутствия сложных внутренних зависимостей;
  • легковесного сопоставления маршрутов;
  • поддержки динамического импорта компонентов;
  • событийного контроля переходов.

Использование вложенных маршрутов и lazy-loading компонентов позволяет строить крупные SPA без потери производительности.

Примеры сложной маршрутизации

<Router>
  <Home path="/" />
  <UserProfile path="/user/:id" />
  <Dashboard path="/dashboard">
    <Router>
      <Stats path="/stats" />
      <Settings path="/settings" />
    </Router>
  </Dashboard>
  <NotFound default />
</Router>

В этом примере реализована многоуровневая маршрутизация с динамическими параметрами, вложенными роутами и fallback-компонентом.

Preact Router обеспечивает простое и гибкое управление маршрутизацией, сохраняя лёгкость и высокую производительность приложений на Preact.

Оглавление