В React Router появился новый хук, который вам ОБЯЗАТЕЛЬНО стоит попробовать!

Описание: React Router только что выпустил совершенно новый хук: stable_useRoute (доступен с версии 7.9) — и он кардинально меняет ситуацию в плане доступа к данным загрузчика/действия в глубине дерева компонентов с полной типобезопасностью.

Результат: более безопасные рефакторинги, меньше ошибок и более чистые компоненты.

Ключевые слова: React Router v7.9, stable_useRoute, useLoaderData, useRouteLoaderData, TypeScript, данные загрузчика, данные действий, идентификаторы маршрутов, вложенные компоненты, типобезопасность, маршрутизаторы данных.

Я также являюсь инструктором по Epic Web. Если вас интересует мой предстоящий воркшоп по React-router, смело бронируйте место ниже:
https://www.epicweb.dev/events/react-...

👍 Если это помогло, ставьте лайк, подписывайтесь на канал, чтобы получать больше советов по React Router/TypeScript/TanStack, и оставляйте комментарии с вашими вопросами!

📌 Оставайтесь на связи:
Twitter:   / alemtuzlak  
GitHub: https://github.com/AlemTuzlak
Github компании: https://github.com/forge-42

⏱️ Временные метки:
00:00 — Введение в новый хук: stable_useRoute (v7.9)
00:16 — Настройка загрузчика маршрутов, возвращающего данные о продукте
00:39 — Отображение продукта в компоненте и проблема с типизацией
01:16 — Экспорт типа ProductLoaderData
01:42 — Типы автоматически обновляются при изменении загрузчика
02:07 — Вложенные компоненты: подводные камни useLoaderData и useRouteLoaderData
03:03 — Знакомьтесь, stable_useRoute: типизированные идентификаторы маршрутов и данные
03:40 — Доступ к loaderData/actionData с полным типом Безопасность
04:28 — Защита неопределённых значений и проверка во время выполнения
05:16 — Рефакторинг: удаление детализации свойств и лишнего экспорта
05:48 — Подведение итогов: более безопасные рефакторинги и более чистые компоненты

🔖 Теги:
Фреймворк React Router, Vite, React Router Vite, веб-разработка, фронтенд-разработка, руководство по Remix, руководство по кодированию, руководство по Remix Vite, открытый исходный код, сообщество разработчиков, руководство по фреймворку Remix, маршрутизатор React, руководство по маршрутизатору React