Относительная и абсолютная навигация

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

Абсолютная навигация

Абсолютная навигация предполагает переход к маршруту, указывая его полный путь от корня приложения. В TanStack Router это реализуется с помощью метода navigate объекта маршрутизатора, передавая строковый путь:

router.navigate('/users/42/profile');

Здесь /users/42/profile — абсолютный путь, начинающийся с корня /. Такой подход удобен, когда требуется перейти к конкретному маршруту, независимо от текущего положения пользователя в иерархии маршрутов.

Особенности абсолютной навигации

  • Независимость от текущего маршрута — переход всегда выполняется к указанному пути.
  • Поддержка параметров маршрута — значения параметров можно передавать через объект:
router.navigate({
  to: '/users/:id/profile',
  params: { id: 42 }
});
  • Прямое указание query-параметров:
router.navigate({
  to: '/search',
  search: { q: 'TanStack' }
});

Относительная навигация

Относительная навигация ориентирована на текущее положение пользователя в дереве маршрутов. В TanStack Router она реализуется через использование специальных сокращений (.., .) или через передачу относительных маршрутов объектом конфигурации.

router.navigate('../profile');

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

Примеры относительной навигации

  1. Переход на уровень выше:
router.navigate('..');
  1. Переход к вложенному маршруту:
router.navigate('./settings');
  1. Комбинация с параметрами:
router.navigate('./settings', {
  params: { tab: 'privacy' }
});

Параметры и query-параметры в относительной навигации

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

router.navigate('./edit', {
  params: { id: 7 },
  search: { ref: 'dashboard' }
});
  • params автоматически подставляются в шаблон маршрута относительно текущего уровня.
  • search добавляет query-параметры к URL, сохраняя контекст текущего маршрута.

Навигация внутри вложенных маршрутов

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

const route = router.getRoute('users.$userId');
router.navigate('./posts', {
  params: { userId: route.params.userId }
});
  • users.$userId — динамический сегмент.
  • Относительный путь ./posts позволяет перейти к разделу постов конкретного пользователя, не задавая абсолютный путь /users/42/posts.

Разница между абсолютной и относительной навигацией

Характеристика Абсолютная навигация Относительная навигация
Путь Полный путь от корня / Относительно текущего маршрута
Удобство при вложенных маршрутах Менее гибкая Более гибкая и читаемая
Передача параметров Через объект params Через объект params
Query-параметры Можно напрямую Можно напрямую

Практические советы

  1. Использовать абсолютные пути для глобальных переходов, например, с главного меню.
  2. Использовать относительные пути внутри вложенных компонентов, чтобы маршруты оставались локальными и независимыми от корневой структуры.
  3. Комбинировать параметры и query-параметры для динамических переходов без дублирования кода.
  4. Проверять контекст текущего маршрута, чтобы относительные переходы корректно работали в сложных вложенных маршрутах.

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

Оглавление