Dodawanie danych w React Router

W poprzednich lekcjach przygotowaliśmy loader i wyładowanie danych dla określonej trasy z magazynu. Zapoznajmy się teraz na przykładzie naszej aplikacji jak dodawać nowy produkt i zapisywać jego dane w magazynie.

Otwórzmy plik root.jsx i dodajmy w layoucie przycisk do dodawania nowego produktu przed nav, owijając go w tag formularza. Również owińmy teraz przycisk i naszą listę w jeszcze jeden div z #menu. Layout będzie teraz wyglądać tak:

routes/root.jsxreturn (
  <div id="main">
    <div id="menu">
      <form method="post">
        <button type="submit">dodaj produkt</button>
      </form>
      {products.length ? (
      <nav>
        {products.map((product) => (
        <Link key={product.id} to={`products/${product.id}`}>
          {product.name ? product.name : <i>Bez nazwy</i>}
        </Link>
        ))}
      </nav>
      ) : (
      <p>
        <i>brak produktów ...</i>
      </p>
      )}
    </div>

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

Jeśli teraz wejdziemy na zakładkę 'Sieć' panelu deweloperskiego, a następnie naciśniemy nasz przycisk, to zobaczymy błędne żądanie dokumentu na serwer. Za pomocą React Router znów skorzystamy z routingu po stronie klienta, wykluczając żądanie na serwer.

Zróbmy to zmieniając tag form na komponent Form React Router. Dodajmy na początek import Form:

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

Teraz zamieńmy tagi form w kawałku kodu:

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

Przeładuj naszą aplikację i spójrz ponownie na panel deweloperski. Naciśnij przycisk dodawania produktu - teraz żądania na serwer już nie ma (na błąd na razie nie zwracaj uwagi).