Декларативная маршрутизация

Preact предоставляет лёгкую и производительную альтернативу React, сохраняя знакомый API, включая возможности декларативной маршрутизации. Маршрутизация в Preact часто реализуется с помощью библиотеки preact-router, которая обеспечивает управление навигацией через компоненты и URL.

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

Для использования маршрутизации необходимо установить пакет:

npm install preact-router

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

import { h } from 'preact';
import Router from 'preact-router';
import { route } from 'preact-router';
  • Router — основной компонент, который управляет отображением маршрутов.
  • route — функция программной навигации между маршрутами.

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

Маршруты определяются внутри компонента Router с помощью атрибута path у дочерних компонентов:

const Home = () => <h1>Главная</h1>;
const About = () => <h1>О сайте</h1>;
const Profile = ({ username }) => <h1>Профиль: {username}</h1>;

const App = () => (
  <Router>
    <Home path="/" />
    <About path="/about" />
    <Profile path="/profile/:username" />
  </Router>
);

Особенности определения маршрутов:

  • Параметры URL указываются через двоеточие (:username). Они автоматически передаются компоненту как пропсы.
  • Каждый путь уникален, и порядок компонентов важен: маршруты проверяются сверху вниз.
  • Поддерживаются wildcard-маршруты (*) для обработки несуществующих страниц.

Программная навигация

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

import { route } from 'preact-router';

const goToProfile = (username) => {
  route(`/profile/${username}`);
};

Использование route особенно удобно для переходов после событий, таких как отправка формы или нажатие кнопки.

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

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

const handleRoute = (e) => {
  console.log('Новый путь:', e.url);
};

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

Событие onChange предоставляет объект с параметрами:

  • url — новый путь
  • previous — предыдущий путь
  • matches — массив совпадающих маршрутов

Это полезно для аналитики, логирования или динамического изменения состояния приложения.

Ленивая загрузка маршрутов

Для крупных приложений важно оптимизировать загрузку компонентов. Preact поддерживает ленивую загрузку через динамический import:

import { lazy } from 'preact/compat';

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

const App = () => (
  <Router>
    <Home path="/" />
    <LazyAbout path="/about" />
  </Router>
);

Это позволяет разделять код и уменьшить первоначальный размер бандла.

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

Preact-router не имеет встроенной поддержки вложенных маршрутов, но их можно реализовать с помощью дочерних компонентов Router:

const Dashboard = () => (
  <Router>
    <Stats path="/dashboard/stats" />
    <Settings path="/dashboard/settings" />
  </Router>
);

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

Redirect и fallback

Для редиректов используется route с флагом замены истории:

route('/login', true); // заменяет текущий путь

Для обработки несуществующих маршрутов удобно использовать wildcard:

const NotFound = () => <h1>Страница не найдена</h1>;

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

Атрибут default гарантирует отображение компонента, если ни один путь не совпал.

Сравнение с React Router

  • Preact-router легче и быстрее, меньше вес бандла.
  • API максимально близок к React, но отсутствуют сложные возможности вроде nested routes с layout-компонентами по умолчанию.
  • Ленивую загрузку и управление программными переходами можно интегрировать так же, как в React.

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

  • Использовать явные пути и избегать дублирующихся маршрутов.
  • Передавать параметры через URL и использовать их как props.
  • Для больших приложений использовать ленивую загрузку для уменьшения времени первого рендера.
  • Использовать событие onChange для отслеживания навигации и аналитики.
  • Для несуществующих страниц всегда предусматривать fallback-компонент с default.

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

Оглавление