Удаление маршрута в 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 панели разработчика и убедиться в этом ;).
Возьмите приложение, созданное вами в заданиях к прошлым урокам. Пользуясь материалами урока, добавьте кнопку для удаления студента, сделайте новый маршрут для удаления, добавьте его в дочерние маршруты. Убедитесь, что все работает.