Что такое режим фреймворка
React Router 7 можно использовать двумя основными способами. В режиме библиотеки он только переключает экраны в браузере — так он используется в уроках курса React. В режиме фреймворка (framework mode) он становится полноценным фулстек-фреймворком: сам собирает проект, отрисовывает страницы на сервере, загружает данные и обрабатывает формы. Этот курс — о режиме фреймворка. Основы React (компоненты, пропсы, хуки) считаются знакомыми.
Откуда он взялся
Раньше фулстек-возможности жили в отдельном фреймворке Remix, который делала та же команда. Remix 2 был построен поверх React Router, и в версии 7 их объединили: всё, что умел Remix, теперь входит в React Router. Если вы встретите статью про Remix 2, почти всё в ней подходит и сюда — меняются только имена пакетов (@remix-run/... стали react-router и @react-router/...).
Три режима
| Режим | Как подключают | Что даёт |
|---|---|---|
| Декларативный | BrowserRouter и Routes | Только маршруты в браузере |
| Данных (data) | createBrowserRouter | Плюс загрузчики и действия в браузере |
| Фреймворк | Шаблон create-react-router и плагин Vite | Плюс сервер, SSR, сборка, типы |
Во всех режимах одни и те же компоненты Link, NavLink, Outlet и хуки вроде useNavigate. Разница в том, кто управляет приложением: вы сами или фреймворк.
Что умеет режим фреймворка
- Маршруты описываются в файле
app/routes.ts, а каждой странице соответствует файл — модуль маршрута. - Функция
loaderзагружает данные на сервере до отрисовки страницы. - Функция
actionпринимает отправленную форму. - Страница сначала отрисовывается на сервере, поэтому пользователь и поисковик сразу получают готовый HTML.
- Типы параметров и данных генерируются автоматически.
Путь запроса
- Браузер запрашивает адрес, например
/posts/1. - React Router находит в
app/routes.tsподходящий маршрут. - Вызывается
loaderэтого маршрута — он берёт статью из базы. - Компонент маршрута получает данные и отрисовывается в HTML.
- Браузер показывает страницу, а затем React «оживляет» её, и дальше переходы идут без перезагрузки.
Версии
Курс написан для React Router 7, React 19 и TypeScript. Нужен Node.js 20 или новее. Сквозной пример — блог: список статей, страница статьи, форма добавления и комментарии.
Частая ошибка
Новички смешивают режимы: устанавливают проект через create-react-router, а потом по старой привычке оборачивают приложение в BrowserRouter и пишут Routes. В режиме фреймворка этого делать не нужно — роутер создаёт сам фреймворк, а маршруты задаются только в app/routes.ts.