React Academy · Les

Loaders en actions (Data Router-API)

Haal routegegevens vóór het renderen op met loaders en verwerk formulierverzendingen met actions.

Les 2 van 413 stappen

Loaders en actions (Data Router-API) is een gratis React Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Academy bevat in totaal 4 lessen.

Wat zijn laadfuncties?

In de Data Router van React Router v6.4+ is een laadfunctie een asynchrone functie op een route die gegevens voordat de route wordt weergegeven ophaalt. Dit vervangt het patroon waarbij je gegevens met useEffect ophaalt.

Een laadfunctie definiëren

Voeg de eigenschap loader toe aan een routeobject. Deze ontvangt { params, request } en geeft gegevens terug, of een 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 },
]);

Gegevens van een laadfunctie lezen met useLoaderData

useLoaderData() geeft terug wat de laadfunctie heeft teruggegeven. De component wordt pas weergegeven nadat de laadfunctie is voltooid.

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

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

Wat zijn acties?

Een actie is een asynchrone functie die gegevensmutaties afhandelt (formulierverzendingen en verwijderingen). Deze wordt uitgevoerd voordat de route opnieuw wordt weergegeven na een formulier-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 gebruiken om acties te starten

Vervang <form> door React Router's <Form>. Bij het verzenden worden velden geserialiseerd als FormData en wordt de actie van de route aangeroepen.

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

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

Gegevens uit acties teruggeven

Acties kunnen gegevens teruggeven, niet alleen een omleiding. Lees deze in de component met useActionData() — handig om validatiefouten terug te geven.

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>
  );
}

Laadstatussen met useNavigation

useNavigation() laat weten wanneer een laadfunctie of actie wordt uitgevoerd, zodat je laadindicatoren kunt tonen of verzendknoppen kunt uitschakelen.

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

Uitgestelde gegevens met defer()

Gebruik defer() om beloften voor trage gegevens vanuit een laadfunctie terug te geven zonder het weergeven te blokkeren. Pak ze daarna uit met <Await> en 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>
    </>
  );
}

Herverificatie na acties

Na afloop van een actie voert React Router automatisch alle actieve laadfuncties opnieuw uit om gegevens te vernieuwen — handmatig opnieuw ophalen is niet nodig.

Fouten afhandelen in laadfuncties

Gooi een Response of een andere fout vanuit een laadfunctie. React Router vangt deze op en geeft het errorElement van de route weer, toegankelijk via useRouteError().

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

Fetchers voor mutaties zonder navigatie

Met useFetcher() kun je laadfuncties of acties aanroepen zonder te navigeren. Handig voor inlineformulieren, bijvoorbeeld om een bericht leuk te vinden zonder de pagina te verlaten.

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

Korte controle

Welke hook leest gegevens die de laadfunctie van een route teruggeeft?

Beantwoord dit in de interactieve les

Samenvatting

De Data-API van React Router gebruikt laadfuncties om gegevens vóór het weergeven op te halen en acties om mutaties af te handelen. Componenten lezen laadgegevens via useLoaderData(), actieresultaten via useActionData() en de navigatiestatus via useNavigation().

Gratis beginnen

Leer React met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 88
Lessen: 324

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Loaders en actions (Data Router-API)” gratis?

Ja — de volledige tekst van “Loaders en actions (Data Router-API)” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus React Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus React Academy bevat in totaal 4 lessen.

Wat leer ik in “Loaders en actions (Data Router-API)”?

Haal routegegevens vóór het renderen op met loaders en verwerk formulierverzendingen met actions. Je oefent met React Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Academy te beginnen?

Ervaring vooraf is niet nodig. React Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Loaders en actions (Data Router-API)”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Academy?

Ja. Elke les over React Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar React Academy