Как загружать данные до показа страницы в React Router?
- Что такое loader в React Router?
loader маршрута — функция, которую роутер вызывает при переходе, параллельно для всех вложенных маршрутов, до рендера страницы; компонент читает результат через useLoaderData(). Так нет «водопада» запросов из вложенных эффектов и мигания пустых состояний. action обрабатывает отправку форм маршрута, после чего loaders перезапрашивают данные. Ошибки loader попадают в errorElement маршрута. С кэшем данных хорошо сочетать TanStack Query: loader заполняет кэш, компонент читает из него.
- useNavigation().state — индикатор загрузки при переходе
- redirect() из loader — для авторизации
- Медленные данные можно отдать позже через defer и Await
А ещё Тот же подход — загрузка на уровне маршрута — в Next.js и Remix
Подробно
{ path: "orders/:id", element: <Order />, errorElement: <OrderError />,
loader: ({ params }) => api.getOrder(params.id!) }
function Order() { const order = useLoaderData() as Order; ... }Что хотят услышать
- loader до рендера, параллельно.
- useLoaderData, action, errorElement.
- Устранение водопада запросов.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗loader вызывается после рендера страницы из useEffect
- ✗loader заменяет сервер и хранит данные
- ✗Вложенные loaders выполняются строго последовательно, от родителя к ребёнку
- ✓loader грузит данные при переходе до рендера; компонент читает их через useLoaderData
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.