Параметры маршрута

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

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

Маршруты с параметрами позволяют компонентам получать данные напрямую из URL. В Haunted параметры маршрута задаются с использованием синтаксиса двоеточий. Например:

const routes = {
  '/user/:id': UserComponent,
  '/post/:postId/comment/:commentId': CommentComponent
};

В этом примере :id, :postId и :commentId — динамические сегменты маршрута. Когда пользователь переходит по адресу /user/42, параметр id автоматически получает значение "42".

Доступ к параметрам маршрута

Haunted предоставляет хук useLocation и объект params для работы с параметрами. Использование параметров выглядит так:

import { useLocation } from 'haunted-router';

function UserComponent() {
  const { params } = useLocation();
  return html`
    <div>
      Пользователь с ID: ${params.id}
    </div>
  `;
}

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

Типы параметров и их преобразование

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

function PostComponent() {
  const { params } = useLocation();
  const postId = Number(params.postId); // преобразование в число
  const showComments = params.showComments === 'true'; // преобразование в boolean

  return html`
    <div>Пост ID: ${postId}</div>
    ${showComments ? html`<div>Комментарии включены</div>` : ''}
  `;
}

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

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

Haunted позволяет строить вложенные маршруты с параметрами, сохраняя доступ к значениям верхнего уровня. Пример:

const routes = {
  '/blog/:blogId': BlogComponent,
  '/blog/:blogId/post/:postId': PostComponent
};

В PostComponent будут доступны оба параметра: blogId и postId. Это позволяет создавать иерархические структуры компонентов с полной информацией о контексте текущего маршрута.

function PostComponent() {
  const { params } = useLocation();
  return html`
    <div>Блог: ${params.blogId}</div>
    <div>Пост: ${params.postId}</div>
  `;
}

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

Параметры маршрута автоматически обновляются при изменении URL. Для реактивного отслеживания изменений используется useEffect или реактивные переменные внутри Haunted-компонента:

import { useEffect } from 'haunted';

function ProfileComponent() {
  const { params } = useLocation();

  useEffect(() => {
    console.log('Текущий пользователь:', params.userId);
  }, [params.userId]);

  return html`<div>Профиль пользователя ${params.userId}</div>`;
}

Такое решение обеспечивает синхронизацию состояния компонента с URL без дополнительных слушателей событий.

Ограничения и особенности

  • Параметры маршрута не поддерживают регулярные выражения напрямую, их точный формат задается только в коде компонента.
  • Пустые или необязательные параметры требуют явной обработки, чтобы избежать ошибок при рендеринге.
  • При работе с массивами параметров (например, /items/:id1/:id2/:id3) порядок сегментов строго соответствует шаблону маршрута.

Динамическая генерация URL

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

function createUserLink(userId) {
  return `/user/${userId}`;
}

function createPostLink(blogId, postId) {
  return `/blog/${blogId}/post/${postId}`;
}

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

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

Хотя основной фокус Haunted — маршруты с path-параметрами, query-параметры (?filter=active&sort=desc) можно получить через объект searchParams из useLocation:

function ItemsComponent() {
  const { searchParams } = useLocation();
  const filter = searchParams.get('filter');
  const sort = searchParams.get('sort');

  return html`
    <div>Фильтр: ${filter}</div>
    <div>Сортировка: ${sort}</div>
  `;
}

Это обеспечивает полное управление как динамическими сегментами URL, так и дополнительными параметрами запроса.

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

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

Понимание работы с параметрами маршрута в Haunted позволяет создавать гибкие, реактивные приложения, где компоненты точно отражают состояние URL и легко адаптируются к изменениям маршрута.

Оглавление