Компонент Link и его использование

Компонент Link в TanStack Router является ключевым инструментом для навигации между маршрутами в приложениях на JavaScript и React. Он обеспечивает декларативное управление переходами между страницами, сохраняя состояние приложения и позволяя использовать функции роутинга без перезагрузки страницы.

Link используется для создания интерактивных элементов, которые изменяют текущий маршрут приложения. В отличие от обычного HTML-тега <a>, Link работает в рамках системы маршрутизации TanStack Router, что позволяет:

  • Обрабатывать навигацию через внутреннее состояние маршрутизатора.
  • Поддерживать асинхронную подгрузку данных при переходе.
  • Управлять переходами с возможностью отмены или изменения параметров.

Пример базового использования:

import { Link } from '@tanstack/router';

function Navigation() {
  return (
    <nav>
      <Link to="/">Главная</Link>
      <Link to="/about">О нас</Link>
      <Link to="/profile/123">Профиль</Link>
    </nav>
  );
}

В этом примере to задаёт путь маршрута. Если маршрут содержит динамические сегменты, их можно передавать через объект params:

<Link to="/profile/:id" params={{ id: 123 }}>Профиль</Link>

Навигация с параметрами и query

Link поддерживает передачу как параметров маршрута, так и query-параметров. Это важно для динамических страниц и фильтрации данных.

<Link
  to="/products/:category"
  params={{ category: 'books' }}
  search={{ sort: 'price', order: 'asc' }}
>
  Книги по цене
</Link>
  • params подставляет значения в путь маршрута.
  • search формирует query-параметры (например, ?sort=price&order=asc).

Работа с состоянием и переходами

Компонент Link может передавать состояние, которое будет доступно на целевой странице через объект маршрутизатора:

<Link
  to="/checkout"
  state={{ fromCart: true }}
>
  Оформить заказ
</Link>

На странице назначения это состояние доступно через хук useRouter:

import { useRouter } from '@tanstack/router';

function Checkout() {
  const router = useRouter();
  console.log(router.state); // { fromCart: true }
}

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

Навигация с обработчиками событий

Link можно использовать вместе с событиями клика для дополнительной логики:

<Link
  to="/dashboard"
  onCl ick={(event) => {
    console.log('Переход на панель управления');
  }}
>
  Панель управления
</Link>

При этом важно помнить, что onClick не отменяет встроенную навигацию, если не вызвать event.preventDefault().

Активные ссылки и стилизация

TanStack Router позволяет определять активные ссылки, что полезно для визуального выделения текущей страницы. Используется функция isActive:

<Link
  to="/about"
  activeProps={{ className: 'active' }}
>
  О нас
</Link>

Если путь совпадает с текущим маршрутом, к элементу добавляются свойства activeProps (например, CSS-класс). Это облегчает создание меню с подсветкой текущей вкладки.

Асинхронные переходы и ленивая загрузка

Link автоматически интегрируется с асинхронными маршрутами, поддерживаемыми TanStack Router. Если маршрут загружает данные динамически, Link инициирует переход и отображение загрузочного состояния:

<Link to="/user/:id" params={{ id: 456 }}>
  Пользователь
</Link>

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

Особенности работы с вложенными маршрутами

Для вложенных маршрутов Link учитывает иерархию и строит корректный путь автоматически. Если маршрут определяется как часть родительского, Link корректно формирует путь:

<Link to="/dashboard/settings">Настройки</Link>

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

<Link to="settings">Настройки</Link> // относительно текущего маршрута
  • Декларативная навигация без перезагрузки страницы.
  • Поддержка динамических параметров маршрута и query-параметров.
  • Передача состояния между страницами.
  • События клика для кастомной логики.
  • Активные ссылки и динамическая стилизация.
  • Интеграция с асинхронными маршрутами.
  • Поддержка вложенных и относительных маршрутов.

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

Оглавление