Přidávání dat do React Router

V předchozích lekcích jsme připravili loader a vykládání dat pro konkrétní route z úložiště. Pojďme se nyní na příkladu naší aplikace seznámit, jak přidat nový produkt a zapsat jeho data do úložiště.

Otevřeme soubor root.jsx a přidejme do layoutu tlačítko pro přidání nového produktu před nav, a obalme jej v tagu form. Také nyní obalme tlačítko a náš seznam v dalším divu s #menu. Layout nyní bude vypadat takto:

routes/root.jsxreturn (
  <div id="main">
    <div id="menu">
      <form method="post">
        <button type="submit">přidat produkt</button>
      </form>
      {products.length ? (
      <nav>
        {products.map((product) => (
        <Link key={product.id} to={`products/${product.id}`}>
          {product.name ? product.name : <i>Bez názvu</i>}
        </Link>
        ))}
      </nav>
      ) : (
      <p>
        <i>žádné produkty ...</i>
      </p>
      )}
    </div>

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

Pokud nyní přejdeme na záložku 'Síť' panelu vývojáře a poté klikneme na naše tlačítko, uvidíme chybný požadavek dokumentu na server. S pomocí React Router opět využijeme směrování na straně klienta, čímž vyloučíme požadavek na server.

Pojďme proto změnit tag form na komponentu Form React Router. Přidejme pro začátek import Form:

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

Nyní nahraďme tagy form v kousku kódu:

root.jsx<Form method="post">
  <button type="submit">přidat produkt</button>
</Form>

Obnovte naši aplikaci a podívejte se znovu na panel vývojáře. Klikněme na tlačítko přidání produktu - nyní již požadavek na server není (na chybu zatím neberte zřetel).