0Pricing
React Academy · Урок

Загрузчики и действия (API маршрутизатора данных)

Получайте данные маршрута до рендеринга с помощью загрузчиков и обрабатывайте отправку форм через действия.

«Загрузчики и действия (API маршрутизатора данных)» — бесплатный урок React Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Что такое загрузчики

В Data Router React Router v6.4+ загрузчик — это асинхронная функция маршрута, которая получает данные до отображения маршрута и заменяет шаблон загрузки данных с помощью useEffect.

Определение загрузчика

Добавьте свойство loader в объект маршрута. Оно получает { params, request } и возвращает данные или Response.

import { createBrowserRouter } from 'react-router-dom';

async function userLoader({ params }) {
  const res = await fetch(`/api/users/${params.id}`);
  if (!res.ok) throw new Response('Not Found', { status: 404 });
  return res.json();
}

const router = createBrowserRouter([
  { path: '/users/:id', element: <UserDetail />, loader: userLoader },
]);

Чтение данных загрузчика с помощью useLoaderData

useLoaderData() возвращает всё, что вернул загрузчик. Компонент отображается только после завершения работы загрузчика.

import { useLoaderData } from 'react-router-dom';

function UserDetail() {
  const user = useLoaderData();
  return <h1>{user.name}</h1>;
}

Что такое действия

Действие — это асинхронная функция, которая обрабатывает изменения данных (отправку форм и удаление). Она выполняется до повторного отображения маршрута после отправки формы методом POST.

async function createUserAction({ request }) {
  const formData = await request.formData();
  const name = formData.get('name');
  await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify({ name }),
    headers: { 'Content-Type': 'application/json' },
  });
  return redirect('/users');
}

Запуск действий с помощью Form

Замените <form> на <Form> из React Router. При отправке поля сериализуются в FormData, после чего вызывается действие маршрута.

import { Form } from 'react-router-dom';

function NewUser() {
  return (
    <Form method="post">
      <input name="name" />
      <button type="submit">Create</button>
    </Form>
  );
}

Возврат данных из действий

Действия могут возвращать данные, а не только выполнять перенаправление. Считайте их в компоненте с помощью useActionData() — это удобно для возврата ошибок проверки.

async function loginAction({ request }) {
  const data = await request.formData();
  const errors = validate(data);
  if (errors) return errors; // returned to useActionData
  await login(data);
  return redirect('/dashboard');
}

function Login() {
  const errors = useActionData();
  return (
    <Form method="post">
      {errors?.email && <p>{errors.email}</p>}
      <input name="email" />
    </Form>
  );
}

Состояния загрузки с useNavigation

useNavigation() сообщает, когда выполняется загрузчик или действие, чтобы Вы могли показать индикаторы загрузки или отключить кнопки отправки.

function SubmitButton() {
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';
  return (
    <button type="submit" disabled={isSubmitting}>
      {isSubmitting ? 'Saving...' : 'Save'}
    </button>
  );
}

Отложенные данные с defer()

Используйте defer(), чтобы возвращать из загрузчика обещания для медленных данных, не блокируя отображение, а затем раскрывайте их с помощью <Await> и Suspense.

import { defer, Await } from 'react-router-dom';

async function slowLoader() {
  return defer({ fast: await getFast(), slow: getSlow() });
}

function Page() {
  const { fast, slow } = useLoaderData();
  return (
    <>
      <h1>{fast.title}</h1>
      <Suspense fallback={<p>Loading...</p>}>
        <Await resolve={slow}>{data => <Chart data={data} />}</Await>
      </Suspense>
    </>
  );
}

Повторная проверка после действий

После завершения действия React Router автоматически повторно запускает все активные загрузчики, чтобы обновить данные — вручную повторно загружать их не требуется.

Обработка ошибок в загрузчиках

Выбросьте из загрузчика Response или любую ошибку. React Router перехватит её и отобразит errorElement маршрута, доступный через useRouteError().

function ErrorPage() {
  const error = useRouteError();
  return (
    <div>
      <h1>{error.status} {error.statusText}</h1>
    </div>
  );
}

Загрузчики для изменений без навигации

useFetcher() позволяет вызывать загрузчики или действия без навигации. Это удобно для встроенных форм, например для отметки публикации как понравившейся без ухода со страницы.

function LikeButton({ postId }) {
  const fetcher = useFetcher();
  return (
    <fetcher.Form method="post" action={`/posts/${postId}/like`}>
      <button type="submit">Like</button>
    </fetcher.Form>
  );
}

Быстрая проверка

Какой хук считывает данные, возвращённые функцией загрузчика маршрута?

Итоги

API данных React Router использует загрузчики для получения данных до отображения и действия для обработки изменений. Компоненты считывают данные загрузчика через useLoaderData(), результаты действий — через useActionData(), а состояние навигации — через useNavigation().

Часто задаваемые вопросы

Урок «Загрузчики и действия (API маршрутизатора данных)» бесплатный?

Да — полный текст урока «Загрузчики и действия (API маршрутизатора данных)» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Загрузчики и действия (API маршрутизатора данных)»?

Получайте данные маршрута до рендеринга с помощью загрузчиков и обрабатывайте отправку форм через действия. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Загрузчики и действия (API маршрутизатора данных)»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Вложенные маршруты и макеты Outlet
  2. Загрузчики и действия (API маршрутизатора данных)
  3. Защищённые маршруты и охрана авторизации
  4. Управление состоянием в параметрах поиска URL
← Назад к React Academy