# Удаление маршрута в React Router

Функцию для удаления данных из хранилища мы написали. Давайте теперь добавим в верстку странички продукта кусок кода с кнопкой для удаления продукта. Добавим его сразу после кнопки редактирования. Обернем обе формы с кнопками в див `#control`. Затем в `action` запишем значение `'delete'`. Также мы добавим диалоговое окошко, чтобы юзер еще раз подтвердил - хочет ли он удалить продукт:

`<div id="control"> <Form action="edit"> <button type="submit">edit</button> </Form> <Form method="post" action="delete" onSubmit={(event) => { if (!confirm('Do you want to delete this product?')) { event.preventDefault(); } }} > <button type="submit">delete</button> </Form> </div>`

Добавим также стилей в наш css-файл:

`div#control { display: flex; } button { margin-right: 5px; }`

А сейчас мы создадим новый маршрут для удаления продукта. Для этого откройте папку `routes` и создайте в ней файл `delete.jsx`. Добавим в него сразу импорт `redirect` и функции удаления `deleteProduct`:

`import { redirect } from 'react-router-dom'; import { deleteProduct } from '../forStorage';`

А затем, естественно, пишем нашу функцию `action`, которая будет вызывать `deleteProduct` по `id`, а после удаления перенаправит нас на главную страничку:

`export async function action({ params }) { await deleteProduct(params.productId); return redirect('/'); }`

Нам осталось только открыть `main.jsx`. Импортировать наш `action`:

`import { action as deleteAction } from './routes/delete';`

И установить его в качестве значения для метода `action` маршрута удаления. Сам объект маршрута мы добавим в конец массива `children`:

`{ path: 'products/:productId/delete', action: deleteAction, },`

Теперь мы можем кликнуть по какому-нибудь продукту и удалить его при помощи кнопки удаления. Можете заглянуть в localforage панели разработчика и убедиться в этом ;).

Возьмите приложение, созданное вами в заданиях к прошлым урокам. Пользуясь материалами урока, добавьте кнопку для удаления студента, сделайте новый маршрут для удаления, добавьте его в дочерние маршруты. Убедитесь, что все работает.

← →
↑