TA
react-router
React-биндинги для TanStack Router: хуки (useRouter, useNavigate), компоненты (Link, Outlet) и SSR-гидратация. Пригодится для маршрутизации в React-приложениях с поддержкой forwardRef и кэширования данных.
Что делает навык
React-биндинги для TanStack Router, предоставляющие хуки (useRouter, useNavigate), компоненты (Link, Outlet) и поддержку SSR-гидратации. Позволяет реализовывать маршрутизацию в React-приложениях с полной типизацией, поддержкой forwardRef и кэшированием данных.
Когда применять
- Настройка маршрутизации в React-приложениях с использованием Vite.
- Реализация клиентской маршрутизации с использованием хуков и компонентов библиотеки.
- Создание файловых маршрутов (File-Based Routing) с помощью Vite Plugin.
- Использование SSR-гидратации и кэширования данных в приложениях.
Как работает
- Установить зависимости: @tanstack/react-router, @tanstack/router-plugin и @tanstack/react-router-devtools.
- Настроить Vite Plugin для поддержки файловых маршрутов.
- Использовать хуки useRouter и useNavigate для управления состоянием и навигацией.
- Применять компоненты Link и Outlet для определения маршрутов и вложенности.
- Обеспечить полную типизацию без приведения типов (cast) или аннотации выведенных значений.
- Учитывать, что загрузчики (Loaders) по умолчанию выполняются на клиенте.
Примеры запросов агенту
Как настроить файловую маршрутизацию в Vite с использованием @tanstack/react-router?
Какие хуки и компоненты использовать для навигации и вложенных маршрутов в TanStack Router?
Как обеспечить полную типизацию маршрутов в @tanstack/react-router без приведения типов?
Что понадобится
- Установленный пакет @tanstack/react-router
- Установленный пакет @tanstack/router-plugin
- Установленный пакет @tanstack/react-router-devtools
Описание составлено по SKILL.md навыка, сверено 13.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «tanstack-react-router» из репозитория:
# https://github.com/tanstack/router
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r tanstack-react-router/ ~/.claude/skills/tanstack-react-router/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.