Legge til data i React Router

I de forrige leksjonene forberedte vi en loader og henting av data for en bestemt rute fra lagringsplassen. La oss nå bli kjent med, ved å bruke eksempelet fra vår applikasjon, hvordan man legger til et nytt produkt og skriver dens data til lagringsplassen.

La oss åpne filen root.jsx og legge til en knapp for å legge til et nytt produkt i layouten, foran nav, og omslutte den med en form-tag. La oss også omslutte både knappen og listen vår i en annen div med #menu. Layouten vil nå se slik ut:

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

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

Hvis vi nå går til fanen 'Nettverk' i utviklerverktøyet, og deretter trykker på knappen vår, vil vi se en feil forespørsel om et dokument til serveren. Ved hjelp av React Router vil vi igjen bruke klient-side routing for å unngå forespørselen til serveren.

La oss for dette endre taggen form til React Router-komponenten Form. La oss legge til en importering av Form til å begynne med:

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

La oss nå erstatte taggene form i kodesnutten:

root.jsx<Form method="post">
  <button type="submit">legg til produkt</button>
</Form>

Last inn applikasjonen vår på nytt og sjekk igjen i utviklerverktøyet. Trykk på knappen for å legge til produkt - nå er det ingen forespørsel til serveren (ignorer feilmeldingen foreløpig).