AIKraft/AI/Войти
AIKraft/Skills/Паттерны Clerk React Router

Паттерны Clerk React Router

React Router v7/v8 patterns with Clerk — rootAuthLoader, getAuth in loaders, clerkMiddleware, protected routes, SSR user data, org switching. Triggers on: react-router auth, rootAuthLoader, getAuth loader, react-router protected route, loader authentication, SSR auth react-router, useNavigate may be used only in the context of a Router.

clerk official Данные

Что делает навык

Набор паттернов для интеграции Clerk с React Router v7.9+ и v8, обеспечивающий серверную аутентификацию, защиту маршрутов и передачу данных пользователя через SSR. Решает задачи безопасного доступа к данным, управления сессиями и переключения организаций в рамках конвейера middleware и loader.

Когда применять

  • Реализация защищённых маршрутов с перенаправлением на страницу входа при отсутствии пользователя.
  • Получение данных текущего пользователя и сессии на сервере (SSR) для рендеринга компонентов.
  • Защита серверных действий (actions) от несанкционированного доступа с проверкой userId.
  • Организация переключения между организациями (B2B) с сохранением контекста в роутинге.

Как работает

  1. Настроить vite.config.ts: для React Router v8 добавить ssr.noExternal: ['@clerk/react-router'], для v7.9+ установить future.v8_middleware: true.
  2. В root.tsx экспортировать middleware с clerkMiddleware() и создать loader, вызывающий rootAuthLoader(args).
  3. Обернуть приложение в ClerkProvider в корневом компоненте, передав ему loaderData из root.tsx.
  4. В loader или action использовать getAuth(args) для получения userId и orgId, выполняя проверки доступа.
  5. В клиентских компонентах использовать useAuth или useUser для отображения состояния аутентификации.

Примеры запросов агенту

Как настроить Clerk в root.tsx для React Router v8 с правильной передачей данных в ClerkProvider?
Напиши loader для защищённого маршрута, который использует getAuth и перенаправляет на /sign-in, если пользователь не авторизован.
Как исправить ошибку 'useNavigate() may be used only in the context of a <Router>' при разработке с Vite и Clerk?

Что понадобится

  • React Router v7.9+ или v8
  • SDK @clerk/react-router v3.5+
  • Vite (для настройки SSR)

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «clerk-react-router-patterns» из репозитория: # https://github.com/clerk/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r clerk-react-router-patterns/ ~/.claude/skills/clerk-react-router-patterns/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.