Добавление данных в React Router
На прошлых уроках мы подготовили загрузчик и выгрузку данных по определенному маршруту из хранилища. Давайте теперь познакомимся на примере нашего приложения как добавлять новый продукт и записывать его данные в хранилище.
Откроем файл root.jsx и добавим
в макет кнопку для добавления нового продукта
перед nav, обернув ее в тег формы. Также
обернем теперь кнопку и наш список в еще
один див с #menu. Макет теперь будет
выглядеть так:
return (
<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:
import { Form } from 'react-router-dom';
Теперь заменим теги form в кусочке кода:
<Form method="post">
<button type="submit">add product</button>
</Form>
Перезагрузите наше приложение и гляньте снова на панель разработчика. Нажмем кнопку добавления продукта - теперь запроса на сервер уже нет (на ошибку пока не обращайте внимания).
Возьмите приложение, созданное вами в
заданиях к прошлым урокам. Пользуясь
материалами урока, исправьте верстку
функции Root, добавьте кнопку для
добавления студента в теге
form. Убедитесь, что при нажатии
кнопки происходит запрос на сервер.
А теперь замените тег form, на
компонент Form. Убедитесь, что
при нажатии на кнопку добавления студента
запроса на сервер не отправляется.