Оглавление
React Router
React Router 7 в режиме фреймворка (бывший Remix): маршруты, загрузчики, действия и серверная отрисовка.
1.Начало работы
- Что такое режим фреймворкаReact Router 7 как фулстек-фреймворк: чем он отличается от режима библиотеки и как связан с Remix.
- Создание проектаСоздание приложения командой create-react-router, запуск сервера разработки и обзор папок.
- Маршруты и модули маршрутовФайл app/routes.ts, функции route и index, модуль маршрута и сгенерированные типы.
- Макеты и вложенные маршрутыОбщая шапка для нескольких страниц: layout, Outlet, вложенные и индексные маршруты, prefix.
- Ссылки и навигацияПереходы между страницами без перезагрузки: Link, NavLink, предзагрузка и useNavigate.
- Динамические сегменты и параметрыОдин маршрут для многих адресов: сегменты с двоеточием, params, необязательные сегменты и звёздочка.
2.Данные и формы
- Загрузчики: данные с сервераФункция loader загружает данные на сервере до отрисовки страницы, компонент получает их в loaderData.
- clientLoader: загрузка в браузереКогда данные нужно получить в браузере: clientLoader, HydrateFallback и вызов serverLoader.
- Действия и формыФункция action принимает отправленную форму на сервере, компонент Form отправляет её без перезагрузки.
- Проверка формы и ошибкиПроверка данных в action, возврат ошибок через data() и вывод их в форме через actionData.
- Состояние ожидания и оптимистичный интерфейсХук useNavigation: индикатор загрузки, блокировка кнопки при отправке и показ результата до ответа сервера.
- useFetcher: формы без переходаКомментарии к статье через fetcher.Form: отправка без смены адреса, своё состояние и оптимистичный вывод.
- Границы ошибокЭкспорт ErrorBoundary в модуле маршрута: страница 404, ожидаемые и непредвиденные ошибки.
- Метатеги и links: SEOЭкспорты meta и links модуля маршрута: заголовок вкладки, описание, теги для соцсетей и подключение файлов.
3.Сервер
- База данныхХранение статей и комментариев в SQLite через пакет better-sqlite3 вместо массива в памяти.
- Сессии и cookiecreateCookieSessionStorage: хранение данных между запросами, чтение и запись сессии, флеш-сообщения.
- Вход и выход пользователяАвторизация на сессиях: форма входа, запись userId в сессию, выход и защита загрузчиков и действий.
- Ресурсные маршруты: JSON и файлыМаршрут без компонента возвращает не страницу, а ответ: JSON для API, CSV-файл, RSS.
- Переменные окруженияФайл .env, process.env в серверном коде, переменные VITE_ для браузера и передача значений через загрузчик.
4.В продакшен
- Способы отрисовки: SSR, SPA и пререндерингФайл react-router.config.ts: серверная отрисовка, режим SPA без сервера и заранее созданные страницы.
- Стили и статические файлыОбщий app.css, Tailwind CSS из шаблона, стили маршрута через links, CSS-модули, картинки и папка public.
- Основы тестированияVitest для загрузчиков и действий как обычных функций и createRoutesStub для проверки компонентов маршрутов.
- Сборка и развёртываниеКоманда react-router build, запуск через react-router-serve, Docker из шаблона и обзор адаптеров для разных платформ.