Дадаванне даных у React Router

На мінулых уроках мы падрыхтавалі загрузчык і выгрузку даных па пэўным маршруце з схоўнішча. Давайце цяпер пазнаёмся на прыкладзе нашага прыкладання як дадаваць новы прадукт і запісваць яго даныя ў схоўнішча.

Адчынем файл root.jsx і дадамо ў макет кнопку для дадання новага прадукту перад nav, абернуўшы яе ў тэг формы. Таксама абернем цяпер кнопку і наш спіс у яшчэ адзін дыў з #menu. Макет цяпер будзе выглядаць так:

routes/root.jsxreturn (
  <div id="main">
    <div id="menu">
      <form method="post">
        <button type="submit">add product</button>
      </form>
      {products.length ? (
      <nav>
        {products.map((product) => (
        <Link key={product.id} to={`products/${product.id}`}>
          {product.name ? product.name : <i>Unnamed</i>}
        </Link>
        ))}
      </nav>
      ) : (
      <p>
        <i>no products here ...</i>
      </p>
      )}
    </div>

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

Калі мы зараз зайдзем на ўкладку 'Сетка' панэлі распрацоўніка, а затым націснем на нашу кнопачку, то ўбачым памылкавы запыт дакумента на сервер. З дапамогай React Router мы зноў скарыстаемся маршрутызацыяй на баку кліента, выключаючы запыт на сервер.

Давайце для гэтага памяняем тэг form на кампанент Form React Router. Дадамо для пачатку імпарт Form:

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

Цяпер замянім тэгі form у кавалачку кода:

root.jsx<Form method="post">
  <button type="submit">add product</button>
</Form>

Перазагрузіце наша прыкладанне і гляньце зноў на панэль распрацоўніка. Націснем кнопку дадання прадукту - цяпер запыту на сервер ужо няма (на памылку пакуль не зважайце ўвагі).