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

Программная навигация является ключевым элементом современных одностраничных приложений (SPA), позволяя изменять состояние интерфейса и URL без перезагрузки страницы. В Preact она реализуется через роутинг, чаще всего с использованием официального пакета preact-router.

Установка и базовая настройка

Для начала необходимо установить роутер:

npm install preact-router

Импортируются компоненты следующим образом:

import { h } from 'preact';
import { Router, route } from 'preact-router';

Router отвечает за обработку маршрутов, а функция route используется для программной навигации.

Простейший пример конфигурации маршрутов:

const App = () => (
  <div>
    <Router>
      <Home path="/" />
      <About path="/about" />
      <Profile path="/profile/:user" />
    </Router>
  </div>
);
  • path указывает путь маршрута.
  • Параметры пути (:user) позволяют передавать динамические значения.

Программная навигация через route

Функция route позволяет перемещаться между страницами без участия пользователя:

import { route } from 'preact-router';

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

Особенности использования:

  1. Замена текущего маршрута – передача второго параметра true заменяет историю браузера:
route('/about', true); // заменяет текущий URL, не добавляя новую запись в историю
  1. Синхронизация с состоянием – программная навигация может быть интегрирована с состоянием приложения (например, через useState или useReducer):
const [user, setUser] = useState(null);

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

Навигация с использованием ссылок

preact-router автоматически обрабатывает обычные ссылки <a> при использовании атрибута href, но можно управлять переходами через Link-компонент:

import { Link } from 'preact-router/match';

<Link href="/about">О проекте</Link>

Преимущества Link:

  • Поддержка активного состояния через activeClassName.
  • Избежание полной перезагрузки страницы.

Пример с активным классом:

<Link href="/profile/john" activeClassName="active">
  Профиль Джона
</Link>

Передача параметров и query-параметров

Для динамических маршрутов параметры извлекаются из пропсов:

const Profile = ({ user }) => (
  <div>Профиль пользователя: {user}</div>
);

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

import { useEffect } from 'preact/hooks';

const Search = ({ url }) => {
  useEffect(() => {
    const params = new URLSearchParams(url.split('?')[1]);
    const query = params.get('q');
    console.log(query);
  }, [url]);

  return <div>Результаты поиска</div>;
};

Программная навигация с задержкой и условием

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

const handleSubmit = async (formData) => {
  const result = await api.sendData(formData);
  if (result.success) {
    route('/success');
  } else {
    route('/error');
  }
};

Такой подход позволяет контролировать логику переходов в зависимости от состояния приложения.

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

Для обработки 404-страниц используется специальный путь без указания path:

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

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

Программная навигация в сочетании с хуками

Интеграция preact-router с хуками позволяет создавать более сложные сценарии:

import { useEffect } from 'preact/hooks';

const RedirectIfNotLogged = ({ user }) => {
  useEffect(() => {
    if (!user) {
      route('/login');
    }
  }, [user]);

  return null;
};

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

Советы по оптимизации

  1. Ленивая загрузка компонентов – для ускорения первоначальной загрузки страницы можно использовать динамический импорт:
import { lazy } from 'preact/compat';

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

  1. Сохранение состояния при навигации – важно управлять состоянием компонентов через useState или глобальные менеджеры состояния, чтобы при переходе между маршрутами не терялись данные.

  2. События навигации – preact-router предоставляет onChange для отслеживания всех переходов:

<Router onCha nge={(e) => console.log('New route:', e.url)}>
  ...
</Router>

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

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

Оглавление