Tilføjelse af data i React Router

I de foregående lektioner har vi forberedt en loader og afsendelse af data for en bestemt rute fra lageret. Lad os nu stifte bekendtskab med et eksempel i vores applikation på, hvordan man tilføjer et nyt produkt og skriver dets data til lageret.

Lad os åbne filen root.jsx og tilføje en knap til at tilføje et nyt produkt i layoutet før nav, og indpakke den i en form-tag. Lad os også nu indpakke både knappen og vores liste i endnu en div med #menu. Layoutet vil nu se sådan ud:

routes/root.jsxreturn (
  <div id="main">
    <div id="menu">
      <form method="post">
        <button type="submit">tilføj produkt</button>
      </form>
      {products.length ? (
      <nav>
        {products.map((product) => (
        <Link key={product.id} to={`products/${product.id}`}>
          {product.name ? product.name : <i>Unavngivet</i>}
        </Link>
        ))}
      </nav>
      ) : (
      <p>
        <i>ingen produkter her ...</i>
      </p>
      )}
    </div>

    <div id="product">
      <Outlet />
    </div>
  </div>
);

Hvis vi nu går til fanen 'Netværk' i udviklerpanelet og derefter klikker på vores lille knap, vil vi se en fejlbehæftet anmodning om et dokument til serveren. Med React Router vil vi igen bruge client-side routing for at undgå anmodningen til serveren.

Lad os for dette ændre tagget form til React Router-komponenten Form. Lad os starte med at tilføje importen af Form:

routes/root.jsximport { Form } from 'react-router-dom';

Erstat nu tagsene form i kodestykket:

root.jsx<Form method="post">
  <button type="submit">tilføj produkt</button>
</Form>

Genindlæs vores applikation og tjek igen i udviklerpanelet. Lad os klikke på tilføjelsesknappen for produktet - nu er der ikke længere en anmodning til serveren (ignorer fejlen for nu).