React Academy · Lektion

Loaders och actions (Data Router API)

Hämta routedata före rendering med loaders och hantera formulärinskickningar med actions.

Lektion 2 av 413 steg

Loaders och actions (Data Router API) är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Vad är loaders?

I React Router v6.4+ Data Router är en loader en asynkron funktion på en route som hämtar data före routens rendering och ersätter mönstret med hämtning i useEffect.

Definiera en loader

Lägg till egenskapen loader i ett route-objekt. Den tar emot { params, request } och returnerar data (eller en 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 },
]);

Läs loader-data med useLoaderData

useLoaderData() returnerar det som loadern returnerade. Komponenten renderas först när loadern har slutförts.

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

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

Vad är actions?

En action är en asynkron funktion som hanterar dataändringar (formulärinskickningar och borttagningar). Den körs innan routen renderas om efter en formulär-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');
}

Utlös actions med Form

Ersätt <form> med React Routers <Form>. Vid inskickning serialiseras fälten som FormData och routens action anropas.

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

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

Returnera data från actions

Actions kan returnera data, inte bara en redirect. Läs den i komponenten med useActionData() — användbart för att returnera valideringsfel.

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

Laddningstillstånd med useNavigation

useNavigation() visar när en loader eller action körs, så att spinner kan visas eller knappar för formulärinskickning inaktiveras.

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

Fördröjda data med defer()

Använd defer() för att returnera långsamma data promises från en loader utan att blockera renderingen. Packa sedan upp dem med <Await> och 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>
    </>
  );
}

Omvalidering efter actions

När en action har slutförts kör React Router automatiskt alla aktiva loaders igen för att uppdatera data. Ingen manuell hämtning behövs.

Felhantering i loaders

Kasta en Response eller ett annat fel från en loader. React Router fångar det och renderar routens errorElement, som är åtkomligt via useRouteError().

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

Fetchers för ändringar utan navigering

useFetcher() låter er anropa loaders eller actions utan att navigera. Det är användbart för formulär direkt på sidan, till exempel för att gilla ett inlägg utan att lämna sidan.

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

Snabbkontroll

Vilken hook läser data som returneras av en routes loader-funktion?

Besvara frågan i den interaktiva lektionen

Sammanfattning

React Routers Data API använder loaders för att hämta data före rendering och actions för att hantera ändringar. Komponenter läser loader-data via useLoaderData(), action-resultat via useActionData() och navigeringstillstånd via useNavigation().

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Loaders och actions (Data Router API)” gratis?

Ja – hela texten till ”Loaders och actions (Data Router API)” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Loaders och actions (Data Router API)”?

Hämta routedata före rendering med loaders och hantera formulärinskickningar med actions. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Loaders och actions (Data Router API)”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till React Academy