# react-router-v7

Скилл с практиками React Router v7: подсказывает, когда брать loader, Form или fetcher, и как настраивать вложенные маршруты.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 572 установки · ★ 84
- Автор: existential-birds
- Лицензия: Apache-2.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/existential-birds/beagle/tree/HEAD/plugins/beagle-react/skills/react-router-v7/SKILL.md
- Обновлён: 2026-09-15
- HTML: https://affpapa.org/nevibecode/skills/react-router-v7

## Что делает

Скилл описывает data-driven маршрутизацию в React Router v7. Внутри — настройка роутера через `createBrowserRouter` и `RouterProvider`, режим Framework с Vite-плагином и файлом `routes.ts`, вложенные маршруты с `Outlet`, динамические сегменты вида `teams/:teamId`, опциональные `:lang?` и сплаты `files/*`.

Отдельный блок — последовательность решений. Агент отвечает на вопросы по порядку и останавливается на первом подходящем API: если URL или история должны меняться, берётся `<Form>` и route `action`; если мутация остаётся на том же маршруте, идёт `useFetcher()`. Похожая развилка для данных: нужны они для первого рендера — `loader`, а если запрос идёт после монтирования по действию пользователя или таймеру — `useEffect`.

Есть таблица сравнения трёх режимов: Framework, Data и Declarative. Она пригодится, когда проект уже написан на `<BrowserRouter>` и вы решаете, стоит ли переезжать. Дополнительные материалы лежат в `references/loaders.md`, `references/actions.md`, `references/navigation.md` и `references/advanced.md` — там про параллельную загрузку, валидацию, защищённые маршруты и ленивую подгрузку.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add existential-birds/beagle --skill react-router-v7 -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/react-router-v7/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/react-router-v7/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add existential-birds/beagle --skill react-router-v7 -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/react-router-v7/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add existential-birds/beagle --skill react-router-v7 -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/react-router-v7/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install existential-birds/beagle react-router-v7
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/react-router-v7/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add existential-birds/beagle --skill react-router-v7 -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/existential-birds/beagle --path plugins/beagle-react/skills/react-router-v7
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/react-router-v7/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add existential-birds/beagle --skill react-router-v7 -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/existential-birds/beagle/tree/HEAD/plugins/beagle-react/skills/react-router-v7/SKILL.md

## Когда брать
- выбрать между `<Form>` и `useFetcher` для конкретной мутации
- настроить вложенные маршруты с `Outlet` и индексной страницей
- перенести загрузку данных из `useEffect` в `loader`
- разобрать динамические сегменты и сплаты в путях
- сравнить Framework, Data и Declarative режимы перед миграцией

## Примеры запросов агенту
- Помоги настроить маршруты через `createBrowserRouter` для каталога товаров
- Стоит ли здесь `useFetcher` или `<Form>`? Мутация остаётся на той же странице
- Перепиши загрузку данных на `loader` и добавь `ErrorBoundary`

## Похожие
- [react-router](https://affpapa.org/nevibecode/skills/react-router.md) — скилл · 547 установок
- [sentry-react-router-framework-sdk](https://affpapa.org/nevibecode/skills/sentry-react-router-framework-sdk.md) — скилл · 1800 установок
- [router-core](https://affpapa.org/nevibecode/skills/router-core.md) — скилл · 589 установок
- [tanstack-router-best-practices](https://affpapa.org/nevibecode/skills/tanstack-router-best-practices.md) — скилл · 7100 установок
- [tanstack-router](https://affpapa.org/nevibecode/skills/tanstack-router.md) — скилл · 4900 установок
- [typescript-react-patterns](https://affpapa.org/nevibecode/skills/typescript-react-patterns.md) — скилл · 1100 установок

Из того же набора: [existential-birds/beagle](https://affpapa.org/nevibecode/by/existential-birds/beagle.md) — 8 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md