Добавление данных в 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>

Перезагрузите наше приложение и гляньте снова на панель разработчика. Нажмем кнопку добавления продукта - теперь запроса на сервер уже нет (на ошибку пока не обращайте внимания).